Use align-content when a flex container wraps or when a grid’s tracks do not fill the container. It distributes rows, flex lines, or grid tracks along the cross or vertical axis, using the available free space. section 4.4.1 section 5.6
Distribute unused grid space
A grid container with height: 1200px and four 200px rows defines 800px of tracks, leaving 400px available. Set align-content to start, end, center, stretch, space-between, space-around, or space-evenly to control where that space goes. The spacing values differ in whether space appears between tracks, at the edges, or both. section 5.6
Choose the value according to the visible result you need:
- Use start or end to place tracks at the beginning or end of the container; use center to place them in the middle. section 5.6
- Use stretch to resize tracks to fill the container; use space-between, space-around, or space-evenly to distribute free space. section 5.6
- In a wrapping flex container, apply the property to spacing between flex lines along the cross axis. For single-line flex layouts, this row-spacing role does not apply. section 4.4.1
- Pair align-content with justify-content when controlling both axes; use place-content as the shorthand for both properties. section 4.4.1 section 5.6
