align-content property aligns the grid items along the column or Y-axis.
Let's look at some examples for align-content
property with all possible
values start
, end
, center
, space-around
, space-between
and
space-evenly
.
align-content: start aligns the grid with the start edge of the grid
container.
align-content: end aligns the grid with the end edge of the grid container.
align-content: center aligns the grid to the center of the grid container.
align-content: space-around places equal amount of space between each grid
item and half-sized spaces on the ends.
align-content: space-between places equal amount of space between each grid
item, with no space at the ends.
align-content: space-evenly places equal amount of space between the grid
items, including the ends.