Is it correct to say that `align-items` aligns grid items vertically within rows whereas `align-content` aligns the rows themselves within the grid?


#1

Question

Is it correct to say that align-items aligns grid items vertically within rows whereas align-content aligns the rows themselves within the grid?

Answer

Yes! This is the correct understanding of these two properties. In order to see the align-content property in action, we must give the grid container a height and ensure that our rows don’t totally fill this height.

For instance, say we had these declaration applied to our grid container: grid-template-rows: repeat(3, 100px) 1fr;, align-content: center; , height: 500px;. In this case, the align-content property doesn’t affect the grid because our rows entirely span the 500px height of the grid. The first 3 rows take up 300px and the last row spans the remaining 200px vertical space.