utilities/align-content

12 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

align-content utility classes table

Tailwind CSS v4 align-content utilities map to CSS as follows: content-normal -> align-content: normal; content-center -> align-content: center; content-start -> align-content: flex-start; content-end -> align-content: flex-end; content-between -> align-content: space-between; content-around -> align-content: space-around; content-evenly -> align-content: space-evenly; content-baseline -> align-content: baseline; content-stretch -> align-content: stretch;

align-content responsive usage

align-content utilities can be applied responsively by prefixing with a breakpoint variant, e.g. default class 'grid content-start' can become 'md:content-around' to apply content-around only at the md breakpoint and above, following Tailwind's standard responsive design pattern.

content-evenly vs content-around

content-evenly distributes rows so there is an equal amount of space around each item, while content-around also produces equal space around each item but results in double the space between items compared to content-evenly (because each item's own space adds up between neighbors).

place-content utility classes reference

Tailwind CSS provides the following place-content utility classes: place-content-center (place-content: center;), place-content-center-safe (place-content: safe center;), place-content-start (place-content: start;), place-content-end (place-content: end;), place-content-end-safe (place-content: safe end;), place-content-between (place-content: space-between;), place-content-around (place-content: space-around;), place-content-evenly (place-content: space-evenly;), place-content-baseline (place-content: baseline;), and place-content-stretch (place-content: stretch;).

place-content-center behavior

The place-content-center utility packs items in the center of both the inline and block axes in a grid layout.

place-content-start behavior

The place-content-start utility packs items against the start of both the inline and block axes in a grid layout.

place-content-end behavior

The place-content-end utility packs items against the end of both the inline and block axes in a grid layout.

place-content-between behavior

The place-content-between utility distributes grid items so that there is an equal amount of space between each row and column on the inline and block axes respectively.

place-content-around behavior

The place-content-around utility distributes grid items so that there is an equal amount of space around each row and column on the inline and block axes respectively.

place-content-evenly behavior

The place-content-evenly utility distributes grid items such that they are evenly spaced on both the inline and block axes.

place-content-stretch behavior

The place-content-stretch utility stretches grid items along their grid areas on both the inline and block axes.

place-content supports responsive design

The place-content utility classes support responsive design modifiers, allowing different place-content values to be applied at different screen sizes.

Give your agent this brain