Is it correct to say that
align-items aligns grid items vertically within rows whereas
align-content aligns the rows themselves within the grid?
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.