CSS Grid Alignment

Here's a rundown of the various alignment properties that you can apply to grid containers and grid items.

Generally, most alignment properties work the same way on grid items as they do on other elements. But there are also some alignment properties that apply specifically to grid and flexbox. Here's an overview.

The align-items Property

The align-items property specifies the default align-self value for all the grid items participating in the grid container's formatting context.

In this example, we apply align-items: center to the grid container, therefore all grid items are aligned to the center of the block axis.

But because this is a default setting, any of the grid items could override this with the align-self property.

The align-self Property

The align-self property aligns a box within its containing block along the block/column/cross axis.

Here, the red grid item has a value of baseline, and the blue item has a value of stretch. The blue item's height is auto, so it stretches to take up the full height of its grid area.

However, we haven't set a value for the green item. Therefore it uses the default value, which in this case, is set to center by the align-items on the grid container.

The justify-items Property

The justify-items property specifies the default justify-self value for all the grid items participating in the grid container's formatting context.

The justify-self Property

The justify-self property can be used to align an individual grid item along the inline/row/main axis.

The justify-content Property

The justify-content property aligns the grid container's contents as a whole along the main/inline axis.

This can be used for aligning the whole grid within the grid container, in the event that the grid tracks take up less space than their grid container. This can happen if you set the track size with an absolute unit (such as pixels), while the grid container takes up more space than all the tracks combined.

The align-content Property

The align-content property is the same as justify-content, except that this property aligns along the cross/block axis.

Shorthand Properties

The place-content Property

The place-content property is shorthand for justify-content and align-content.

The place-items Property

The place-items property is shorthand for justify-items and align-items.

The place-self Property

The place-self property is shorthand for justify-self and align-self.