Grid alignment & justification

When elements are inside a Grid, they live within their cells. By default, they will take up all the space of their cell.

We can use align-items and justify-items to change that.

• align-items: controls how they are aligned on the vertical axis
• justify-items: controls how they are aligned on the horizontal axis

We can also control how the the grid is aligned, with all the content grouped together. We use align-content and justify-content to change that.

• align-content: controls how the grid is aligned within it’s parent on the vertical axis
• justify-content: controls how the grid is aligned within it’s parent on the horizontal axis

For all of these, you will most often pick from the following values.

• stretch: the default
• start
• end
• center

There are more values that you can use, but these are the ones you’ll use in most cases. You can find the full list for justify-items here and align-items here if you’d like to explore them.

Use the grid inspector

To what elements are doing when using Grid, I strongly recommend using your grid inspector so that you can see the cells that the elements are living in. It makes it much easier to understand what is happening.