Understanding Boxes w/Rows and Columns px

Hello all, I’m having trouble understanding these last 2 questions from my quiz. I’m not understanding how grid-auto-rows and grid-auto-columns are used to determine the dimensions for each added box in the answer for each of these questions. These questions both look and read the same to me?!


When do i know when to use each option to determine height and width?

In the first question, we’re adding a new row. The grid-template-rows defines 2 rows with a height of 50px each, and the grid-template-columns attribute defines 2 columns with a width of 100px each. Therefore, there is only room, in our explicitly defined grid structure, for 4 boxes. A 5th box will overflow into an implicit 3rd row, and since we’ve only explicitly defined 2 rows, our 3rd row will inherit the properties defined by grid-auto-rows.

In the second question, we’re still only adding a new row but no additional column is required. This is because, when additional items are added past the explicitly defined grid structure, the default way of incorporating new elements is to overflow them into new rows. Since we’re not creating a new column and we’re asked for the width of the new item in the grid, it would still default to the explicitly defined grid-template-columns attribute.

I believe that the default behaviour for overflowing grid elements can be changed, but off the top of my head, I cannot remember what it’s called. In any case, I hope I’ve described the difference between the questions satisfactorily.

1 Like

Okay that kind of clears things up for me! Thank you, I was wondering how that was determined.