place-content

Utilities for controlling how content is justified and aligned at the same time.

Examples

Center

Use place-content-center to pack items in the center of the inline and block axes:

Start

Use place-content-start to pack items against the start of the inline and block axes:

End

Use place-content-end to pack items against the end of the inline and block axes:

Space between

Use place-content-between to distribute grid items along the inline and block axes so that there is an equal amount of space between each row and column on each axis respectively:

Space around

Use place-content-around to distribute grid items along the inline and block axes so that there is an equal amount of space around each row and column on each axis respectively:

Space evenly

Use place-content-evenly to distribute grid items such that they are evenly spaced on the inline and block axes:

Stretch

Use place-content-stretch to stretch grid items along their grid areas on the inline and block axes:

Responsive design