Flexbox & Grid

justify-items

Set the default inline-axis alignment of items inside their grid areas.

Class	Declarations
`justify-items:normal`	`justify-items: normal;`
`justify-items:baseline`	`justify-items: baseline;`
`justify-items:left`	`justify-items: left;`
`justify-items:center`	`justify-items: center;`
`justify-items:right`	`justify-items: right;`
`justify-items:stretch`	`justify-items: stretch;`
`justify-items:legacy`	`justify-items: legacy;`
`justify-items:start`	`justify-items: start;`
`justify-items:end`	`justify-items: end;`
`justify-items:flex-start`	`justify-items: flex-start;`
`justify-items:flex-end`	`justify-items: flex-end;`
`justify-items:self-start`	`justify-items: self-start;`
`justify-items:self-end`	`justify-items: self-end;`
`justify-items:<value>`	`justify-items: <value>;`

Use justify-items:center to center each grid item in its own area along the inline axis. These two equal columns are wider than their labels; the 160px row keeps the area height visible while items-start holds the labels at the top.

Align grid items inline

Two equal grid columns keep their track sizes. Alignment changes each item’s inline position or automatic width inside its own area.

<div id="layout" class="grid grid-cols:2 grid-template-rows:160px items-start justify-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  }  .justify-items\:center {    justify-items: center  }}

This sets the default for children with justify-self:auto. It does not distribute the tracks; use justify-content for that.

Stretch automatic-width items

justify-items:stretch fills the inline size of each grid area when the item’s width is automatic. The blue label fills its first column; the violet label keeps its explicitly set 80px width.

Stretch automatic-width items

Two equal grid columns keep their track sizes. Alignment changes each item’s inline position or automatic width inside its own area.

<div id="layout" class="grid grid-cols:2 grid-template-rows:160px items-start justify-items:stretch gap-md w:17.5rem max-w:100%">  <div id="target" class="p-sm">Auto width</div>  <div id="peer" class="w:5rem p-sm">80px</div></div>

Minimum and maximum widths still constrain stretching. Use justify-self to override this default for one item.

Apply conditionally

Use conditional queries to change alignment at a real viewport width. The automatic-width labels fill their columns by default. From sm, each label takes its intrinsic width and centers within the same grid area.

Apply conditionally

Two equal grid columns keep their track sizes. Alignment changes each item’s inline position or automatic width inside its own area.

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