Justify Self

Use justify-self-* utilities to override the alignment of a single grid item along its inline (column) axis. Per-cell overrides win over the container’s justify-items-* value — the same cascade as CSS.

Each demo below stacks two grid layers: a striped placeholder behind every box, then the real grid on top. The 5 base tiles sit on the stripes (or fill them, depending on the example); tile 02 is the highlighted cell whose justify-self-* value steers the layout.

Start

Use justify-self-start to align an item to the start of its cell’s inline axis.

Style('grid justify-items-stretch ...', children: [
  // ...
  Style('justify-self-start ...', child: Text('02')),
  // ...
])

Center

Use justify-self-center to align an item along the center of its cell’s inline axis.

Style('grid justify-items-stretch ...', children: [
  // ...
  Style('justify-self-center ...', child: Text('02')),
  // ...
])
Style('grid justify-items-stretch ...', children: [
  // ...
  Style('justify-self-center-safe ...', child: Text('02')),
  // ...
])

End

Use justify-self-end to align an item to the end of its cell’s inline axis.

Style('grid justify-items-stretch ...', children: [
  // ...
  Style('justify-self-end ...', child: Text('02')),
  // ...
])
Style('grid justify-items-stretch ...', children: [
  // ...
  Style('justify-self-end-safe ...', child: Text('02')),
  // ...
])

Stretch

Use justify-self-stretch to make a single grid item fill its cell’s inline axis, overriding the container’s justify-items-* setting. Below the container says justify-items-stretch (so the 5 base tiles render at their explicit w-14 size), but tile 02 carries justify-self-stretch to suppress the per-cell Align wrapper and stretch.

Style('grid justify-items-stretch ...', children: [
  // ...
  Style('justify-self-stretch ...', child: Text('02')),
  // ...
])

Class reference

Class	Description
justify-self-auto	Defer to the parent grid’s justify-items value.
justify-self-start	Align item to the start of its inline axis.
justify-self-center	Align item along the center of its inline axis.
justify-self-end	Align item to the end of its inline axis.
justify-self-stretch	Stretch the item to fill its cell’s inline axis (suppresses the per-cell Align wrapper, overriding the container’s justify-items-* value).
justify-self-center-safe, justify-self-end-safe	(parity omitted)

Parity omissions

• justify-self-center-safe, justify-self-end-safe — Flutter has no overflow-fallback alignment concept (the CSS safe keyword falls back to start when items would overflow).