Hi,
I am really struggling with understanding why I’m getting this quiz question wrong, and I’m not sure what to do. Can anyone offer some clarity? Why does the fifth box not take the implicit guidance from the auto property?
The question asks:
Imagine we have a grid with the following CSS properties, with 4 boxes inside of it. If we added a fifth box to the HTML, what width would it have?
.grid {
grid-template-rows: repeat(2, 50px);
grid-template-columns: repeat(2, 100px);
grid-auto-rows: 60px;
grid-auto-columns: 70px;
}
But here is a picture of what I’m dealing with:
1 Like
And, as a quick follow-up, the mirror question takes the implicit auto-sizing as the correct answer for the fifth box. Is it just a bug or am I missing something?
2 Likes
Hi there,
So the grid is impacted by what is known as grid-auto-flow. Which, the default of grid-auto-flow is row.
Let’s take a look at this code:
<h2><code>grid-auto-flow: row;</code></h2>
<p> The auto-placement algorithm places items by filling each row in turn</p>
<section class="grid">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
<div class="item">item4</div>
</section>
<h2><code>grid-auto-flow: column;</code></h2>
<p> The auto-placement algorithm places items by filling each column in turn</p>
<section class="grid grid2">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
<div class="item">item4</div>
</section>
And CSS:
.grid {
display: grid;
grid-template-rows: repeat(2, 50px);
grid-template-columns: repeat(2, 100px);
grid-auto-rows: 60px;
grid-auto-columns: 70px;
gap: 20px;
}
.grid2 {
grid-auto-flow: column;
}
.item {
background-color: red;
}
body {
padding: 20px;
}
h2 {
margin-bottom: 1em;
}
Now, I’m going to add three more items to the first grid to give a bigger example.
Because grid-auto-flow is set to row, new items will be placed to fill new rows. Now let’s add three more items to the second grid.
With grid-auto-flow set to column, new items will be placed to fill new columns.
In both of these examples, I have also marked the height and width of the original and new items to show the differences. I hope the helps!
1 Like
This is where I’m confused – the quiz question doesn’t have an auto-flow set. Your “grid-auto-flow: column;” example code shows the way I would interpret the quiz question. Smaller box dimensions begin with the fifth box – and that’s what the second question I posted shows, too. That the fifth box will take on the auto-row size of 60px.
Maybe I’m just missing something. I appreciate you trying to help me get it, though!
1 Like
Well, perhaps that was not the best example. Even if auto-flow is not purposefully set by the developer, it is what the default setting is.
If you look at the first grid, which has the default setting of auto-flow rows (but even if auto-flow was not set, it is auto-flow rows by default), you can see that the new items are creating rows. Because they are creating rows, they will take on the width of the column but use the height determined from grid-auto-rows.
This is why in the first question, the answer is 100px and not 70px. The next question is asking what height the new item would have. Which is why the answer is 60.
Does that make any more sense?
5 Likes
Yes! Thank you! I didn’t realize that auto-rows was the default. Thank you so much!
1 Like
Don’t worry- ChatGPT gets it wrong as well 
In the given CSS grid, we have defined explicit grid dimensions with 2 rows and 2 columns, each with fixed sizes of 50px and 100px, respectively. We have also set grid-auto-rows to 60px and grid-auto-columns to 70px, which means any additional elements added to the grid will have these dimensions.
Since you have four boxes already inside the grid, the fifth box will be placed in the implicit grid area, and its width will be 70px (as defined by grid-auto-columns).
So, the fifth box will have a width of 70px.
The explanation should elaborate a bit more imo.
The new box will still be in one of the explicitly defined columns, which are 100px each.
2 Likes
Here I am in 2024 and struggling with this question. I found this forum post, but it’s still unclear to me.
Hi there. I was struggling with this questions as well.
But after playing with VS code, I think it is because the auto-rows is the default. So the row(height) of extra boxes outside what you explicitly defined will take the value 60px as defined in grid-auto-rows. And the column(width) will still take the value 100px as defined in grid-template-column.
You can try if you set grid-auto-flow to column. Then the row(height) of extra boxes would be 50px, and column(width) would be 70px.
What matters is the value of grid-auto-flow, and its default value is row.
I was also confused by these questions initially.
When grid-auto-flow is set to row, the only way to maintain a “grid” layout is for any implicitly created items to have the same width as the explicitly created items, regardless of what grid-auto-columns is set to.
See example below - the implicitly created items have a width of 100px, despite grid-auto-columns being set to 125px (code is at the bottom of the post) - i.e. grid-auto-columns has no effect here.
grid-auto-rows does have effect - the height of the implicitly created items changes from 50px to 75px - but this is fine as the “grid” layout is maintained.
If grid-auto-columns did have an effect, then the layout would no longer be a “grid” - like below:
CSS:
div {
display: grid;
grid-template-rows: repeat(2, 50px);
grid-template-columns: repeat(2, 100px);
grid-auto-rows: 75px;
grid-auto-columns: 125px;
}
HTML:
<div>
<button>1 - Explicit</button>
<button>2 - Explicit</button>
<button>3 - Explicit</button>
<button>4 - Explicit</button>
<button>5 - Implicit</button>
<button>6 - Implicit</button>
</div>
3 Likes
Thanks for your explanation
1 Like
Thank you for this explanation. This was the only one that made sense to me. 
1 Like
