Place Items

Use place-items-* to set both align-items and justify-items in a single declaration. Each utility positions items along BOTH axes inside their grid cells. Tailwind’s <Example> demonstrates the effect by applying place-self-* per-cell with a <Stripes> overlay showing each cell’s bounds.

Start

Use place-items-start to align items to the start of their grid cell on both axes. The example below uses place-self-start per-cell to demonstrate the equivalent visual.

Style('grid h-56 grid-cols-3 gap-4 ...', children: [
  Style('place-self-start ...', child: Text('01')),
  // ...
  Style('place-self-start ...', child: Text('06')),
])

End

Use place-items-end to align items to the end of their grid cell on both axes.

Style('grid h-56 grid-cols-3 gap-4 ...', children: [
  Style('place-self-end ...', child: Text('01')),
  // ...
  Style('place-self-end ...', child: Text('06')),
])

Center

Use place-items-center to align items at the center of their grid cell on both axes.

Style('grid h-56 grid-cols-3 gap-4 ...', children: [
  Style('place-self-center ...', child: Text('01')),
  // ...
  Style('place-self-center ...', child: Text('06')),
])

Stretch

Use place-items-stretch to stretch items so they fill their grid cell on both axes.

Style('grid h-56 grid-cols-3 place-items-stretch gap-4 ...', children: [
  Text('01'),
  Text('02'),
  Text('03'),
  Text('04'),
  Text('05'),
  Text('06'),
])

Class reference

Class	Description
place-items-start	Align items to the start of each cell on both axes.
place-items-end	Align items to the end of each cell on both axes.
place-items-center	Align items at the center of each cell on both axes.
place-items-stretch	Stretch items to fill each cell on both axes.
place-items-baseline	(parity omitted)
place-items-center-safe, place-items-end-safe	(parity omitted)

Parity omissions

• place-items-baseline — Tailwind ships no example block for this variant; Flutter has no last-baseline alignment per cell.
• place-items-center-safe / place-items-end-safe — the CSS safe keyword falls back to start when content would overflow; Flutter’s layout has no overflow-fallback alignment concept.
• place-items-stretch nested-grid wrapper — Tailwind’s upstream <Example> wraps each cell in <div class="grid place-items-stretch"> to force the inner div to stretch. In our renderer that 0-column nested grid lacks bounded height in the cell context; the outer grid + tile classes already produce stretch-filled cells, so the wrapper is omitted in the playground demo. The visual output matches Tailwind exactly.