Grid Item Alignment
Block Axis Alignment
The Block axis refers to how a typical block layout is rendered. Block elements tend to flow from top to bottom with elements stacked upon each other.
Block axis alignment is controlled with align-self and align-items properties.
The align-itemsproperty applied to a grid container will influence the placement of all grid items within the container while align-self applied to a grid item overrides the parent’s align-items value.
Inline Axis Alignment
The inline or row axis crosses the block axis and can generally be thought of as the direction of text flows.
Inline alignment is accomplished using justify-self and justify-items
Similar to block alignment, the line alignment of a container’s grid items can be accomplished with justify-items while applying justify-self to a grid item overrides it.
WARNING
The default value for the alignment properties is stretch. Stretch will consume the available space regardless of content but once another value is declared, grid items will scale to the size needed as determined by the content within it.