Flexbox & Grid

place-content

Set block/inline grid-track distribution or flex cross/main-axis distribution together.

Class	Declarations
`place-content:normal`	`place-content: normal;`
`place-content:baseline`	`place-content: baseline;`
`place-content:center`	`place-content: center;`
`place-content:stretch`	`place-content: stretch;`
`place-content:start`	`place-content: start;`
`place-content:end`	`place-content: end;`
`place-content:flex-start`	`place-content: flex-start;`
`place-content:flex-end`	`place-content: flex-end;`
`place-content:space-around`	`place-content: space-around;`
`place-content:space-between`	`place-content: space-between;`
`place-content:space-evenly`	`place-content: space-evenly;`
`place-content:<align-content>\|<justify-content>`	`place-content: <align-content> <justify-content>;`

place-content:center sets both align-content:center and justify-content:center. These fixed 80px columns and 48px rows form a compact grid inside a larger 280 × 224px container, leaving room to center the track group in both directions.

Align tracks on both axes

The fixed track group moves within the larger grid container. Its column widths, row heights and minimum gaps stay unchanged.

<div id="layout" class="grid grid-template-columns:5rem|5rem grid-template-rows:3rem|3rem place-content:center gap-md h:14rem w:17.5rem max-w:100%">  <div id="target" class="p-sm">01</div>  <div id="peer" class="p-sm">02</div>  <div id="item-3" class="p-sm">03</div>  <div id="item-4" class="p-sm">04</div></div>

Generated CSS

@layer utilities {  .grid {    display: grid  }  .place-content\:center {    place-content: center  }}

In Grid, the two components act on the block and inline axes. In a wrapping flex container they act on the cross-axis lines and main-axis items within each line. align-content has no effect on a flex-nowrap container.

Use separate axis values

The first value sets align-content; the second sets justify-content. Here start|space-between keeps the rows at block-start while spreading the two fixed columns to the inline edges. With horizontal writing, this means top-aligned rows and columns at the left and right.

Use separate axis values

The fixed track group moves within the larger grid container. Its column widths, row heights and minimum gaps stay unchanged.

<div id="layout" class="grid grid-template-columns:5rem|5rem grid-template-rows:3rem|3rem place-content:start|space-between gap-md h:14rem w:17.5rem max-w:100%">  <div id="target" class="p-sm">01</div>  <div id="peer" class="p-sm">02</div>  <div id="item-3" class="p-sm">03</div>  <div id="item-4" class="p-sm">04</div></div>

Use place-items for alignment inside each grid area. Fractional or stretched tracks can consume the space that would otherwise be available for content distribution.

Apply conditionally

Use conditional queries to change alignment at a real viewport width. The fixed track group starts at the top-left, then centers on both axes from sm. The container and track sizes stay fixed while the viewport condition changes.

Apply conditionally

The fixed track group moves within the larger grid container. Its column widths, row heights and minimum gaps stay unchanged.

<div id="layout" class="grid grid-template-columns:5rem|5rem grid-template-rows:3rem|3rem place-content:start gap-md h:14rem w:17.5rem max-w:100% place-content:center@sm">  <div id="target" class="p-sm">01</div>  <div id="peer" class="p-sm">02</div>  <div id="item-3" class="p-sm">03</div>  <div id="item-4" class="p-sm">04</div></div>