CSS: Grid -- Quiz question that is baffling to me

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?

1 Like

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;
}

image
Now, I’m going to add three more items to the first grid to give a bigger example.
image

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.
image
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 :sweat_smile:

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.

1 Like