Flexbox & Grid

place-items

Set the default block-axis and inline-axis alignment inside grid areas.

Class	Declarations
`place-items:normal`	`place-items: normal;`
`place-items:baseline`	`place-items: baseline;`
`place-items:center`	`place-items: center;`
`place-items:stretch`	`place-items: stretch;`
`place-items:start`	`place-items: start;`
`place-items:end`	`place-items: end;`
`place-items:flex-start`	`place-items: flex-start;`
`place-items:flex-end`	`place-items: flex-end;`
`place-items:self-start`	`place-items: self-start;`
`place-items:self-end`	`place-items: self-end;`
`place-items:<align-items>\|<justify-items>`	`place-items: <align-items> <justify-items>;`

place-items:center sets both align-items:center and justify-items:center. Each label centers within its own column and 160px row. The grid tracks keep their full size; only the items move inside their areas.

Align grid items on both axes

Each item aligns within its own grid area. Stretch applies only to dimensions that remain automatic.

<div id="layout" class="grid grid-cols:2 grid-template-rows:160px place-items:center gap-md w:17.5rem max-w:100%">  <div id="target" class="p-sm">Alpha</div>  <div id="peer" class="p-sm">Beta</div></div>

Generated CSS

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

For different values, put block-axis alignment first and inline-axis alignment second, such as place-items:start|center.

Stretch automatic-sized items

place-items:stretch fills both dimensions of a grid area when the corresponding item sizes are automatic. The blue item has no width or height, so it fills its area. The violet item keeps its explicitly set 80 × 64px size.

Stretch automatic-sized items

Each item aligns within its own grid area. Stretch applies only to dimensions that remain automatic.

<div id="layout" class="grid grid-cols:2 grid-template-rows:160px place-items:stretch gap-md w:17.5rem max-w:100%">  <div id="target" class="p-sm">Auto size</div>  <div id="peer" class="h:4rem w:5rem p-sm">80 × 64</div></div>

Minimum and maximum sizes still apply. Use place-self when just one child needs an override.

Apply conditionally

Use conditional queries to change alignment at a real viewport width. Both automatic-sized labels fill their areas initially, then take intrinsic sizes and center in those same areas from sm.

Apply conditionally

Each item aligns within its own grid area. Stretch applies only to dimensions that remain automatic.

<div id="layout" class="grid grid-cols:2 grid-template-rows:160px place-items:stretch gap-md w:17.5rem max-w:100% place-items:center@sm">  <div id="target" class="p-sm">Alpha</div>  <div id="peer" class="p-sm">Beta</div></div>

For flex items, only the align-items half affects alignment. justify-items does not distribute a flex line’s free space; use justify-content for that.

Flexbox & Grid

place-content

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

Flexbox & Grid

place-self

Override block-axis and inline-axis alignment for an individual grid item.