Place Self

Use place-self-* to override an individual grid item’s alignment on BOTH axes (CSS shorthand for align-self + justify-self). The override beats the parent’s place-items-* value for that item only.

Auto

Use place-self-auto to defer to the parent’s place-items-* value (CSS default). The override is a no-op — the child inherits whatever the container declares.

Style('grid grid-cols-3 gap-4 ...', children: [
  Text('01'),
  Style('place-self-auto ...', child: Text('02')),
  Text('03'),
  Text('04'),
  Text('05'),
  Text('06'),
])

Start

Use place-self-start to align an individual item against the start of its grid cell on both axes.

Style('grid grid-cols-3 gap-4 ...', children: [
  Text('01'),
  Style('place-self-start ...', child: Text('02')),
  Text('03'),
  Text('04'),
  Text('05'),
  Text('06'),
])

Center

Use place-self-center to align an individual item along the center of its grid cell on both axes.

Style('grid grid-cols-3 gap-4 ...', children: [
  Text('01'),
  Style('place-self-center ...', child: Text('02')),
  Text('03'),
  Text('04'),
  Text('05'),
  Text('06'),
])

End

Use place-self-end to align an individual item against the end of its grid cell on both axes.

Style('grid grid-cols-3 gap-4 ...', children: [
  Text('01'),
  Style('place-self-end ...', child: Text('02')),
  Text('03'),
  Text('04'),
  Text('05'),
  Text('06'),
])

Stretch

Use place-self-stretch to opt an individual item into the parent’s place-items-stretch behavior. When the parent already stretches all children, the override is visually identical to the surrounding tiles.

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

Class reference

Class	Description
place-self-auto	Defer to the parent’s place-items-* value (CSS default).
place-self-start	Align this item to the start of its cell on both axes.
place-self-center	Align this item at the center of its cell on both axes.
place-self-end	Align this item to the end of its cell on both axes.
place-self-stretch	Stretch this item to fill its cell on both axes.
place-self-center-safe, place-self-end-safe	(parity omitted)

Parity omissions

• place-self-center-safe / place-self-end-safe — the CSS safe keyword falls back to start when an item would overflow; Flutter’s layout has no overflow-fallback alignment concept.
• place-self-stretch rendering — the resolver sets both selfStretch: true and justifySelfStretch: true, but both fields are currently parsed-only in the renderer (mirrors self-stretch / justify-self-stretch precedents). The demo relies on the parent’s place-items-stretch already stretching all children; visual differentiation comes from the highlight color.