Flexbox & Grid

place-self

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

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

place-self:end sets both align-self:end and justify-self:end. The blue item moves to the bottom-right of its own area while the violet sibling follows the parent’s start alignment. The second example uses end|start: block-end first, then inline-start.

Align one item on both axes

The blue item has a local alignment override. The violet sibling follows the parent’s two-axis default in its own grid area.

<div id="layout" class="grid grid-cols:2 grid-template-rows:160px place-items:start gap-md w:17.5rem max-w:100%">  <div id="target" class="place-self:end h:3rem w:5rem p-sm">Target</div>  <div id="peer" class="h:3rem w:5rem p-sm">Start</div></div>

<div id="layout" class="grid grid-cols:2 grid-template-rows:160px place-items:start gap-md w:17.5rem max-w:100%">  <div id="target" class="place-self:end|start h:3rem w:5rem p-sm">Target</div>  <div id="peer" class="h:3rem w:5rem p-sm">Start</div></div>

Generated CSS

@layer utilities {  .grid {    display: grid  }  .place-items\:start {    place-items: start  }  .place-self\:end {    place-self: end  }  .place-self\:end\|start {    place-self: end start  }}

These directions refer to the grid container’s writing mode. The examples use horizontal left-to-right writing.

Center one item

place-self:center centers the blue 96 × 64px item in both dimensions of its grid area. The second item keeps the same size and follows the parent’s start alignment, making the local override visible.

Center one item

The blue item has a local alignment override. The violet sibling follows the parent’s two-axis default in its own grid area.

<div id="layout" class="grid grid-cols:2 grid-template-rows:160px place-items:start gap-md w:17.5rem max-w:100%">  <div id="target" class="place-self:center h:4rem w:6rem p-sm">Centered</div>  <div id="peer" class="h:4rem w:6rem p-sm">Start</div></div>

Use place-items when every child should follow the same two-axis default. For flex items, the justify-self half has no effect.

Apply conditionally

Use conditional queries to change alignment at a real viewport width. place-self:auto follows the parent’s end alignment on both axes. From sm, the blue item centers in its own area; the violet item stays at the bottom-right of its area.

Apply conditionally

The blue item has a local alignment override. The violet sibling follows the parent’s two-axis default in its own grid area.

<div id="layout" class="grid grid-cols:2 grid-template-rows:160px place-items:end gap-md w:17.5rem max-w:100%">  <div id="target" class="place-self:auto h:3rem w:5rem p-sm place-self:center@sm">Target</div>  <div id="peer" class="h:3rem w:5rem p-sm">End</div></div>