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.
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 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.
justify-items property specifies the default
justify-self value for all the grid items participating in the grid container's formatting context.
justify-self property can be used to align an individual grid item along the inline/row/main axis.
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.