Making a Website Responsive/Learn CSS Grid/Second Quiz Question Concern

I am going through the CSS Grid section of the Full Stack Developer career path. I have never worked with Grid before, so these are new concepts. I will post an image of the quiz question I am confused about. Is this something that I am just having difficulty understanding, or is the accepted answer to this question wrong?

If I’m understanding the question correctly, there is a 2 x 2 grid (2 rows and 2 columns). The question specifies that there are 4 boxes (there is an item in each row and in each column). That being the case, those 4 boxes are explicit items, whereas the 5th box being added would be an implicit item. That would mean the 5th box should have the width and height specified with grid-auto-rows and grid-auto-columns, right? I would think the correct answer to this question is 70px. However it is marked as incorrect, and the explanation is that the 5th box being added is an explicit item. What am I missing, because this has me frustrated!

By default when working with grid, as soon as you add grid-template-columns you can only get explicit column elements except a specific circumstance (see next paragraph). When there are too many items to fit onto a row, it will automatically wrap the elements to a new row to ensure that the number of template columns is not exceeded. Therefore in this question with nothing else outside of it, you will always get implicit rows before ever getting implicit columns. As a result the box will get a height of 60px from the auto row, and a width of 100px from the template columns.

Now, we can actually get implicit columns despite having a grid template defined. What you need to do is give an element an explicit position outside the scope of the grid template. In this example we have 2 columns, therefore placing something in column 3 would result in it getting the auto column value. I have created a codepen to demonstrate this. If you uncomment the grid-column line of code inside of .last then you will see that the grid is forced into a 3 column arrangement, with the third column being shorter than the rest (specifically a width of 70px).

Generally however this would be not recommended unless you find a specific situation that called for it. In most cases, a grid layout will always try to fit into explicit columns unless it’s forced to add a new column explicitly by the developer.

1 Like

Thank you for that detailed reply. Now that you’ve explained it, that makes sense. I was just having trouble wrapping my head around it.

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.