The place-content property defines how the collective content of a container is distributed along both the block and inline axes — in other words, it controls where the group of tracks or wrapped lines sits inside the container when there is extra space. It acts as a shorthand that sets the two orthogonal alignment axes together, combining the behaviors of align-content and justify-content. Because it targets the content as a whole rather than individual items, it's most relevant for multi-track or multi-line layout situations such as CSS Grid or a flex container with wrapping.

Understanding how place-content differs from per-item alignment is important. Properties like place-items, align-items, and justify-items affect how individual grid or flex items are positioned within their own grid area or flex line; by contrast, place-content moves or distributes the entire block of lines or tracks inside the container (for example pushing them to the start, centering them, or distributing leftover space between lines). It also interacts with the size of tracks and the container’s available space: when there is no extra space or when the content fills the container, changing place-content has little to no visible effect.

In practical layouts, place-content is useful for controlling overall composition — for centering a grid of items within a larger panel, for defining how wrapped flex lines fill a container, or for creating controlled gaps of free space around the group of tracks. Its behavior respects the document’s writing mode and logical axes, so the meaning of “inline” and “block” can flip in vertical or sideways writing modes. It also interacts with other layout settings such as track sizing and spacing (for example, the container’s gap between tracks) and with auto margins on children; use it when you want to handle grouping and distribution of content at the container level rather than adjusting alignment of each item individually.