Is the CSS Grid quiz answer wrong?

I’m just learning CSS grid, but from what I’ve learned, the quiz answer seems wrong. I asked ChatGPT and it came up with the same answer as me.

What is the right answer?

The easiest way to find out is trying it:
https://jsfiddle.net/o2w4drn7/1/

If you do not define a specific position for the fifth element, it will be positioned in the 1st column of the third row. CSS grid is not a masonry grid. So the first column is 100px wide as defined by the two columns of the first two rows. The third row is not set by the grid-template definitions, so it will have the height as defined by grid-auto-rows. So the quiz’ answer is correct.

If you place the item entirely outside the grid, like:

grid-row: 3 / 4;
grid-column: 3 / 4;

you’ll see that the element is 70px wide and 60px high.

2 Likes

Thank you mirja, thats what I thought it was!
However the quiz says the correct answer is 100 pixels and you say the correct answer is 70 pixels.
So the quiz is wrong then?

Hi there!

I want to pop in with some additional information.

With the jsfiddle created above, add the grid-auto-flow property to .grid and see how it affects the fifth div. Then take a look at some docs for grid-auto-flow and see if you can understand why the answer was 100px :slight_smile:

2 Likes

Oh! I get it now! So the column is still explicitly defined even when all the explicitly defined squares are filled. Like it says. I got thrown again when mirja said the element is 70px wide and 60px high, when it wasn’t. Thank you! I was feeling crazy :smiley:

I wrote it is if you place it outside the grid with the additional code I provided:

If you do not, this part of my answer is true as the fiddle also suggests:

3 Likes

Oh, I see what you were saying. Thanks for clarifying.