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.