Grid-items created Implicitly, without knowing size of other items? grid-auto-columns question

Hi all,

From Front-End Engineering Path, Making a Website Responsive, Advanced Grid Quiz:

What am I missing here? Without knowing the size of the grid items how can I be sure the “fifth” box will not be created implicitly? grid-auto-columns is set to 70px, thus, why it seems the answer should be 70px.

Any guidance or clarification is appreciated!

2 Likes

Grid-auto-rows/columns sets an automatic height/width for the boxes, but only when it’s not is specified elsewhere.

In this case you specified in grid-template-columns that you want to have 2 columns and they must have a width of 100px. So basically the width of grid-auto-columns gets overwritten by the width of grid-template-columns. When you add box 5 it it will be placed in column 1 and sets it’s width to 100px because you specified that you wanted the boxes in the column to be 100px wide. It doesn’t matter how many boxes you add because they will all placed in column 1 or 2 and be 100px wide. Only if there was a max limit of two items for each column and a new column has to be added, then the box would have a width of 70px. This would require “grid-auto flow: column;” top be in effect.

The height of box 5 however will be 60px because you only wanted 2 rows with a height of 50px.

Here’s the HTML and CSS code if you want to play around with it:

<style>
  .grid {
    display: grid;
    grid-template-rows: repeat(2, 50px);
    grid-template-columns: repeat(2, 100px);
    grid-auto-rows: 60px;
    grid-auto-columns: 70px;
    gap: 10px 10px;
    border: 1px solid black;
    padding: 10px;
}

.box {
  border: 1px solid black;
}
</style>


<div class="grid">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
</div>

I’m still a bit confused as well. Specifically, why does the grid-template-columns override grid-auto-column, but grid-template-rows doesn’t override grid-auto-rows?

I assumed that when the initial parameters were set, it only explicitly defined a 4x4 grid and anything after gets the implicit auto value assigned to it (i.e 60px height and 70px width).

New grid items go with the flow and take the height and/or width of the previous grid item by default as fixed dimensions.

A new item takes the width of the column above (100px) because there is an item above it with that width.

There is no item to the left of the new item if it’s in the fist column of a new row however and we specified to only have two rows with a 50px height, so it takes the auto height op 70px for every new row.

The only way the new item can have a different width is to give it a fixed width:

<style>
  .grid {
    display: grid;
    grid-template-rows: repeat(2, 50px);
    grid-template-columns: repeat(2, 100px);
    grid-auto-rows: 60px;
    grid-auto-columns: 70px;
    gap: 10px 10px;
    border: 1px solid black;
    padding: 10px;
}

.box {
  border: 1px solid black;
}

.small-box {
    width: 70px;
}
</style>


<div class="grid">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box small-box">5</div>
</div>

The only way grid-auto-columns is useful is when you use grid-template-areas instead of columns/rows because they have no specified column widths and auto-columns is the fixed width for columns in this case:

<style>
  .grid {
    display: grid;
    grid-template-areas: "a a"
			                 "a a";
    grid-auto-rows: 60px;
    grid-auto-columns: 70px;
    gap: 10px 10px;
    border: 1px solid black;
    padding: 10px;
}

.box {
  border: 1px solid black;
}
</style>


<div class="grid">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
</div>

Note that the new items are all still being pushed inside the row of the existing columns and never a new column. A new column will likely mess up your layout while a new row normally doesn’t as long as you don’t have a fixed height. This is useful when you want to add new items later on.

Summary:

  • Use grid-template-columns/rows when you want to have a specific amount of columns and rows and aren’t adding any new items later on.
  • Use grid-template-areas with grid-auto-columns/rows when you want to have a specific amount of columns but don’t know how many items are going to be added in the rows.
  • You can combine the first option with grid-auto-rows to have the same effect as the second option.
  • items in a column will always have the same width unless that item is specifically targeted with a fixed width.
1 Like