– Aligning tracks inside containers: Distributing empty space –
The two properties “justify-content” and “align-content” are all about aligning tracks inside the container. Justify-content aligns horizontally (AKA on the row axis), and align-content aligns vertically (AKA on the vertical axis.)
– Aligning items inside cells: Moving items around inside cell –
The two properties “justify-items” and “align-items” are all about aligning items INSIDE cells.
Likewise with justify-content / align-content above, justify-items aligns horizontally, and align-items aligns vertically; only difference is that justify-items and align-items moves the content INSIDE the cells, rather than the entire track itself.
– Aligning items inside cells: Moving individual cell items –
There is a way to override the above justify/align properties, which uses “justify-self” and “align-self”. These two properties move the given cell item around like justify-content / align-content, except it only moves that one specific cell and not the entire track.
Recap:
justify-content / align-content -> Aligns the entire track horizontally / vertically respectively
justify-items / align-items -> Aligns items inside grid cells horizontally / vertically respectively.
justify-self / align-self -> Aligns individual grid cells horizontally / vertically respectively.