Place Content

Use place-content-* to set both align-content and justify-content in a single declaration. CSS shorthand: place-content: <align> <justify>. Each utility distributes the grid’s rows along the cross axis AND the columns along the inline axis.

Center

Use place-content-center to pack rows and columns at the center of the grid container.

Style('grid h-56 grid-cols-[repeat(2,56px)] place-content-center gap-4 ...', children: [
  Text('01'),
  Text('02'),
  Text('03'),
  Text('04'),
])

Start

Use place-content-start to pack rows and columns at the start of the grid container.

Style('grid h-56 grid-cols-[repeat(2,56px)] place-content-start gap-4 ...', children: [
  Text('01'),
  Text('02'),
  Text('03'),
  Text('04'),
])

End

Use place-content-end to pack rows and columns at the end of the grid container.

Style('grid h-56 grid-cols-[repeat(2,56px)] place-content-end gap-4 ...', children: [
  Text('01'),
  Text('02'),
  Text('03'),
  Text('04'),
])

Space between

Use place-content-between to distribute rows and columns with equal space between each.

Style('grid h-56 grid-cols-[repeat(2,56px)] [place-content:space-between] gap-4 ...', children: [
  Text('01'),
  Text('02'),
  Text('03'),
  Text('04'),
])

Space around

Use place-content-around to distribute rows and columns with equal space around each.

Style('grid h-56 grid-cols-[repeat(2,56px)] [place-content:space-around] gap-x-4 ...', children: [
  Text('01'),
  Text('02'),
  Text('03'),
  Text('04'),
])

Space evenly

Use place-content-evenly to distribute rows and columns with equal space around them, including the outer edges.

Style('grid h-56 grid-cols-[repeat(2,56px)] [place-content:space-evenly] ...', children: [
  Text('01'),
  Text('02'),
  Text('03'),
  Text('04'),
])

Stretch

Use place-content-stretch to stretch grid cells across the cross axis. The container uses grid-cols-2 (not the fixed grid-cols-[repeat(2,56px)]) so the columns stretch to fill the width.

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

Class reference

Class	Description
`place-content-center`	Pack rows and columns at the center.
`place-content-start`	Pack rows and columns at the start.
`place-content-end`	Pack rows and columns at the end.
`place-content-between`	Distribute rows and columns with space between.
`place-content-around`	Distribute rows and columns with space around.
`place-content-evenly`	Distribute rows and columns with equal space around.
`place-content-stretch`	Stretch rows and columns to fill the container.
`place-content-baseline`	(parity omitted)
`place-content-center-safe`, `place-content-end-safe`	(parity omitted)

Parity omissions

place-content-baseline — Tailwind ships no example block for this variant; Flutter’s WrapAlignment has no baseline value.
place-content-center-safe / place-content-end-safe — the CSS safe keyword falls back to start when content would overflow; Flutter’s layout has no overflow-fallback alignment concept.
place-content-stretch — partial support. The cross-axis stretch fires (cells fill column tracks via crossAxisAlignment.stretch); the block-axis distribution downgrades to WrapAlignment.start because Flutter’s WrapAlignment has no stretch value. Visually rows pack at the top instead of distributing to fill remaining vertical space.
Tailwind’s arbitrary CSS form — upstream <Example> blocks for between/around/evenly use the arbitrary-CSS syntax [place-content:space-between] (a rendering quirk in the Tailwind docs site). ArbitraryValueResolver parses this [place-content:<value>] form and resolves it identically to the named place-content-* utility, so the pages here use the same arbitrary-CSS form Tailwind’s own examples do.