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?
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.
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
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
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:
Oh, I see what you were saying. Thanks for clarifying.