The CSS quiz on advanced grids got me confused

#1

Hi guys.

I was wondering if someone could explain this to me (see picture attachment). In words:

Two seemingly identical questions with identical example code, with the only difference being asking for the width or the height of the “5th box” - if it were to be added. In one instance the right answer lies within the predefined height of IMPLICITLY added rows (grid-auto-rows), in the other instance, the right answer lies within the predifined EXPLICITLY defined columns (grid-template-columns). There are nothing that seperate the way these questions are asked, which leads me to believe one would go about answering them both in the same way / based on the same theory. But alas. In one case, you’ll be correct to assume that the 5th box is implicitly added, while in the other - explicitly added. How come?

If you were to take one of these seemingly identical questions and then learn from what the right answer is, then you’d get the other one wrong. Is there something I have missed (perhaps something something about something being whatever as default), or is this just a minor mistake by the quiz-maker? :sunglasses: and if so! - which question/answer should I draw knowledge from? :open_mouth:

BR
Robert

Implicit%20vs%20explicit
Implicit vs explicit.jpg547×790 55.8 KB

1 Like
#2

There is a css grid property called grid-auto-flow. If unassigned, it assumes row. When an html element is added, and the predefined grid (in this case 2 rows and 2 columns) can’t contain it, the grid implicitly adds a new row which receives the grid-auto-rows value for it’s height. In the second question the 5th element is still added to an implicitly added new row, but into the original explicitly defined 1st column, so it gets the width of the grid-template-columns. If, we added grid-auto-flow: column; to the css, the grid would implicitly add a new column instead of a new row for the 5th element. In that case the 5th element would have the predefined height of the explicitly created row, but the width of the implicitly created new column as defined by grid-auto-columns. Hopefully that made some sense. :grinning:

2 Likes
Implicit or explicit grid?
#3

Hi, thanks for the reply, and sorry I’m late to reply back here.
But wait wait wait… I think I’m picking up on it (though I have read your answer 5 times and not sure how to read it all): Can the fifth element (any extra element that doesn’t fit the grid template) only be either a row, or a column? I mean, in many ways, that’s of course very logical - but I have been thinking the fifth element can sort of be both (I might have been fooled by the fact there was values for both auto-rows and auto-columns). And as you say, the property “grid-auto-flow: columns” is used for when you want that extra element to be counted as a column, and not a row - which is the default? And this is why the “grid-auto-row”- property containts the right answer in the first question, because the height is defined by the values of rows, while the question for width in the second in is defined by the values for columns - but the fifth element is still counted as a row when implicitly added, which means I must ignore the value for “grid-auto-column” in order to find the width - and instead look to “grid-template-columns”?

Did I get it?? :smiley:

BR
Robert

2 Likes
#4

Yes. That’s essentially it. You start in their example with a 2x2 grid, so it will only contain up to 4 elements. When the 5th is added the default for grid-auto-flow: is row, so a row is added. If you add grid-auto-flow: column to the css, a column would be added instead. New rows would get the height of grid-auto-rows, but inherit the width of the already existing columns. New columns get the width of grid-auto-columns, but inherit the height of the already existing rows.

4 Likes
#5

Sweet! Thanks a bunch :blush: That one was really bugging me.

BR

Robert

1 Like
#6