How does defining the height of a grid influence the `grid-auto-rows` property?


#1

Question

How does defining the height of a grid influence the grid-auto-rows property?

Answer

Defining the height of a grid should not influence the grid-auto-rows property. For example, if we apply this declaration to our grid container grid-auto-rows: 100px; any implicitly added rows will have a height of 100px regardless of the actual grid height. In practice, this means that our grid might be smaller or larger than the content it contains. If the grid is smaller, content will spill out. If it is larger, there will be a lot of wasted space at the bottom of the grid.

If we want our grid to auto-expand or shrink such that it contains it’s grid items, we should avoid giving it a fixed height.