Align Content

Some times the total size of the grid items can be smaller than the grid container. If this is the case, the CSS property align-content can be used to position the entire grid along the column axis of the grid container.

The property is declared on the grid container.

The value start aligns the grid to the top of the grid container.

The value end aligns the grid to the bottom of the grid container.

The value center centers the grid vertically in the grid container.

The value stretch stretches the grid items to increase the size of the grid to expand vertically across the container.

The value space-around includes an equal amount of space on each side of a grid element, resulting in double the amount of space between elements as there is before the first and after the last element.

The value space-between includes an equal amount of space between grid items and no space at either end.

The value space-evenly places an even amount of space between grid items and at either end.