Alignment

Align items, individual items, and grid content along supported axes.

Use alignment utilities on a flex or grid container to position its children. items aligns along a flex container’s cross axis and the grid block axis; justify controls the main axis in flex layouts, place-items combines both grid item axes, and self overrides one item.

Quick reference

Example class	Expected declarations
`items-center`	`align-items: center;`
`justify-between`	`justify-content: space-between;`
`self-end`	`align-self: flex-end;`
`place-items-center`	`place-items: center;`
`justify-items-center`	`justify-items: center;`
`justify-self-end`	`justify-self: end;`
`place-content-between`	`place-content: space-between;`
`place-self-start`	`place-self: start;`
`self-start`	`align-self: flex-start;`

Example setup

Every preview explicitly starts from spec 1, reset "none", strict mode, spacingUnit "0.25rem", and no breakpoints. Numeric spacing values multiply that unit; no Tailwind theme is inherited. wind-demo classes are authored presentation scaffolding, with their CSS shown beside the exact HTML source.

Examples in use

Align a flex row

justify-between distributes items along the row; items-center aligns them across it, while self-end overrides one child's cross-axis position.

Align a flex row

HTML

<div class="wind-demo">
  <p class="wind-demo-note">On a row, justify-content moves along the main axis and align-items moves across it.</p>
  <div class="wind-demo-frame flex h-32 w-full items-center justify-between gap-2">
    <div class="wind-demo-tile">Start</div><div class="wind-demo-tile self-end">Self end</div><div class="wind-demo-tile">End</div>
  </div>
</div>

CSS

@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.45 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-frame {
  border: 1px solid #9aaabd;
  background: #f8fafc;
  padding: .75rem;
}

.wind-demo-note {
  color: #53677f;
  font-size: .875rem;
}

.wind-demo-tile {
  border: 1px solid #849bb3;
  background: #dce8f2;
  color: #203046;
  padding: .5rem;
  text-align: center;
}
.flex {
  display: flex;
}
.items-center {
  align-items: center;
}
.justify-between {
  justify-content: space-between;
}
.self-end {
  align-self: flex-end;
}
.h-32 {
  height: 8rem;
}
.w-full {
  width: 100%;
}
.gap-2 {
  column-gap: 0.5rem;
  row-gap: 0.5rem;
}

Configuration for this example

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-frame": true,
      "wind-demo-note": true,
      "wind-demo-tile": true
    },
    "safelist": {
      "docs-preview": [
        "flex",
        "gap-2",
        "h-32",
        "items-center",
        "justify-between",
        "self-end",
        "w-full"
      ]
    }
  }
}

Authored demonstration CSS

.wind-demo { font: 14px/1.45 system-ui, sans-serif; color: #203046; }
.wind-demo-frame { border: 1px solid #9aaabd; background: #f8fafc; padding: 0.75rem; }
.wind-demo-note { color: #53677f; font-size: 0.875rem; }
.wind-demo-tile { border: 1px solid #849bb3; background: #dce8f2; color: #203046; padding: 0.5rem; text-align: center; }

Align grid items on both axes

place-items-center centers grid items, justify-items-center controls the inline axis, place-content-between distributes the grid tracks, and separate tiles demonstrate justify-self-end, place-self-start, and self-start.

Align grid items on both axes

HTML

<div class="wind-demo">
  <p class="wind-demo-note">place-items sets both axes for each grid item; self overrides one item.</p>
  <div class="wind-demo-frame grid grid-cols-2 grid-rows-2 h-36 place-items-center justify-items-center place-content-between gap-2">
    <div class="wind-demo-tile justify-self-end">Justify self end</div><div class="wind-demo-tile place-self-start">Place self start</div>
    <div class="wind-demo-tile self-start">Self start</div><div class="wind-demo-tile">Centered</div>
  </div>
</div>

CSS

@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.45 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-frame {
  border: 1px solid #9aaabd;
  background: #f8fafc;
  padding: .75rem;
}

.wind-demo-note {
  color: #53677f;
  font-size: .875rem;
}

.wind-demo-tile {
  border: 1px solid #849bb3;
  background: #dce8f2;
  color: #203046;
  padding: .5rem;
  text-align: center;
}
.grid {
  display: grid;
}
.grid-cols-2 {
  grid-template-columns: repeat(2,minmax(0,1fr));
}
.grid-rows-2 {
  grid-template-rows: repeat(2,minmax(0,1fr));
}
.justify-items-center {
  justify-items: center;
}
.justify-self-end {
  justify-self: end;
}
.place-content-between {
  place-content: space-between;
}
.place-items-center {
  place-items: center;
}
.place-self-start {
  place-self: start;
}
.self-start {
  align-self: flex-start;
}
.h-36 {
  height: 9rem;
}
.gap-2 {
  column-gap: 0.5rem;
  row-gap: 0.5rem;
}

Configuration for this example

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-frame": true,
      "wind-demo-note": true,
      "wind-demo-tile": true
    },
    "safelist": {
      "docs-preview": [
        "gap-2",
        "grid",
        "grid-cols-2",
        "grid-rows-2",
        "h-36",
        "justify-items-center",
        "justify-self-end",
        "place-content-between",
        "place-items-center",
        "place-self-start",
        "self-start"
      ]
    }
  }
}

Authored demonstration CSS

.wind-demo { font: 14px/1.45 system-ui, sans-serif; color: #203046; }
.wind-demo-frame { border: 1px solid #9aaabd; background: #f8fafc; padding: 0.75rem; }
.wind-demo-note { color: #53677f; font-size: 0.875rem; }
.wind-demo-tile { border: 1px solid #849bb3; background: #dce8f2; color: #203046; padding: 0.5rem; text-align: center; }

Custom and named values

These roots accept fixed keywords. Newly admitted justify-self, justify-items, and place-self use start, end, center, stretch, baseline. Place-content uses start, end, center, stretch, between (space-between), around (space-around), and evenly (space-evenly). Place-self sets align-self and justify-self; place-content sets align-content and justify-content. Existing place-items is unchanged. The new roots do not admit flex-start or flex-end as utility suffixes; CSS itself may use those values, and existing items, self, and justify retain their flex-start/flex-end emissions.

Related guides: Utility grammar · Variants

Catalog details

items

Field	Value
Catalog identifier	`v1.items`
Class pattern	`items-<suffix>`
Grammar	`{"acceptedKinds":["keyword"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`5`
Token categories	No token category
Negative-value policy	`forbidden`
Conflict group and rank	`alignment` (`7`)
Order rank	`0`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`align-items`

Accepted values

Kind	Suffix	Emitted value
`keyword`	`"start"`	`"flex-start"`
`keyword`	`"end"`	`"flex-end"`
`keyword`	`"center"`	`"center"`
`keyword`	`"baseline"`	`"baseline"`
`keyword`	`"stretch"`	`"stretch"`

Declaration templates

Property	Value kind	Fixed value
`align-items`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`items-center`	`align-items: center`

justify

Field	Value
Catalog identifier	`v1.justify`
Class pattern	`justify-<suffix>`
Grammar	`{"acceptedKinds":["keyword"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`6`
Token categories	No token category
Negative-value policy	`forbidden`
Conflict group and rank	`alignment` (`7`)
Order rank	`0`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`justify-content`

Accepted values

Kind	Suffix	Emitted value
`keyword`	`"start"`	`"flex-start"`
`keyword`	`"end"`	`"flex-end"`
`keyword`	`"center"`	`"center"`
`keyword`	`"between"`	`"space-between"`
`keyword`	`"around"`	`"space-around"`
`keyword`	`"evenly"`	`"space-evenly"`

Declaration templates

Property	Value kind	Fixed value
`justify-content`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`justify-center`	`justify-content: center`

justify-items

Field	Value
Catalog identifier	`v1.justify-items`
Class pattern	`justify-items-<suffix>`
Grammar	`{"acceptedKinds":["keyword"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`5`
Token categories	No token category
Negative-value policy	`forbidden`
Conflict group and rank	`alignment` (`7`)
Order rank	`0`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`justify-items`

Accepted values

Kind	Suffix	Emitted value
`keyword`	`"start"`	`"start"`
`keyword`	`"end"`	`"end"`
`keyword`	`"center"`	`"center"`
`keyword`	`"stretch"`	`"stretch"`
`keyword`	`"baseline"`	`"baseline"`

Declaration templates

Property	Value kind	Fixed value
`justify-items`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`justify-items-center`	`justify-items: center`

justify-self

Field	Value
Catalog identifier	`v1.justify-self`
Class pattern	`justify-self-<suffix>`
Grammar	`{"acceptedKinds":["keyword"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`5`
Token categories	No token category
Negative-value policy	`forbidden`
Conflict group and rank	`alignment` (`7`)
Order rank	`0`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`justify-self`

Accepted values

Kind	Suffix	Emitted value
`keyword`	`"start"`	`"start"`
`keyword`	`"end"`	`"end"`
`keyword`	`"center"`	`"center"`
`keyword`	`"stretch"`	`"stretch"`
`keyword`	`"baseline"`	`"baseline"`

Declaration templates

Property	Value kind	Fixed value
`justify-self`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`justify-self-center`	`justify-self: center`

place-content

Field	Value
Catalog identifier	`v1.place-content`
Class pattern	`place-content-<suffix>`
Grammar	`{"acceptedKinds":["keyword"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`7`
Token categories	No token category
Negative-value policy	`forbidden`
Conflict group and rank	`alignment` (`7`)
Order rank	`0`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`place-content`

Accepted values

Kind	Suffix	Emitted value
`keyword`	`"start"`	`"start"`
`keyword`	`"end"`	`"end"`
`keyword`	`"center"`	`"center"`
`keyword`	`"stretch"`	`"stretch"`
`keyword`	`"between"`	`"space-between"`
`keyword`	`"around"`	`"space-around"`
`keyword`	`"evenly"`	`"space-evenly"`

Declaration templates

Property	Value kind	Fixed value
`place-content`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`place-content-center`	`place-content: center`

place-items

Field	Value
Catalog identifier	`v1.place-items`
Class pattern	`place-items-<suffix>`
Grammar	`{"acceptedKinds":["keyword"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`4`
Token categories	No token category
Negative-value policy	`forbidden`
Conflict group and rank	`alignment` (`7`)
Order rank	`0`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`place-items`

Accepted values

Kind	Suffix	Emitted value
`keyword`	`"start"`	`"start"`
`keyword`	`"end"`	`"end"`
`keyword`	`"center"`	`"center"`
`keyword`	`"stretch"`	`"stretch"`

Declaration templates

Property	Value kind	Fixed value
`place-items`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`place-items-center`	`place-items: center`

place-self

Field	Value
Catalog identifier	`v1.place-self`
Class pattern	`place-self-<suffix>`
Grammar	`{"acceptedKinds":["keyword"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`5`
Token categories	No token category
Negative-value policy	`forbidden`
Conflict group and rank	`alignment` (`7`)
Order rank	`0`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`place-self`

Accepted values

Kind	Suffix	Emitted value
`keyword`	`"start"`	`"start"`
`keyword`	`"end"`	`"end"`
`keyword`	`"center"`	`"center"`
`keyword`	`"stretch"`	`"stretch"`
`keyword`	`"baseline"`	`"baseline"`

Declaration templates

Property	Value kind	Fixed value
`place-self`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`place-self-center`	`place-self: center`

self

Field	Value
Catalog identifier	`v1.self`
Class pattern	`self-<suffix>`
Grammar	`{"acceptedKinds":["keyword"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`5`
Token categories	No token category
Negative-value policy	`forbidden`
Conflict group and rank	`alignment` (`7`)
Order rank	`0`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`align-self`

Accepted values

Kind	Suffix	Emitted value
`keyword`	`"start"`	`"flex-start"`
`keyword`	`"end"`	`"flex-end"`
`keyword`	`"center"`	`"center"`
`keyword`	`"baseline"`	`"baseline"`
`keyword`	`"stretch"`	`"stretch"`

Declaration templates

Property	Value kind	Fixed value
`align-self`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`self-center`	`align-self: center`

Alignment

Quick reference

Examples in use

Align a flex row

Align grid items on both axes

Custom and named values

items

Accepted values

Declaration templates

Catalog examples

justify

Accepted values

Declaration templates

Catalog examples

justify-items

Accepted values

Declaration templates

Catalog examples

justify-self

Accepted values

Declaration templates

Catalog examples

place-content

Accepted values

Declaration templates

Catalog examples

place-items

Accepted values

Declaration templates

Catalog examples

place-self

Accepted values

Declaration templates

Catalog examples

self

Accepted values

Declaration templates

Catalog examples

Revision History