Justify Items

Use justify-items-* utilities to control how grid items are aligned along their inline (column) axis. Each per-cell Align wrapper applies inside the grid cell that’s already been laid out by grid-cols-*.

Each demo below stacks two grid layers: a striped placeholder behind every box (a bare grid grid-cols-3 gap-4 whose children are SizedBox(height: 56, child: StripesBackground(...))), then the real justify-items-* grid on top so the cell boundaries are visible regardless of how small the tile is.

Start

Use justify-items-start to align grid items to the start of their inline axis.

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

Center

Use justify-items-center to align grid items along the center of their inline axis.

class JustifyItemsCenterExample extends StatelessWidget {
  const JustifyItemsCenterExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Style(
      'grid grid-cols-1 gap-8',
      children: [
        Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            const Style(
              'text-center font-mono text-xs font-medium'
              ' text-gray-500 dark:text-gray-400',
              child: Text('justify-items-center'),
            ),
            Style(
              'mt-4 grid auto-rows-fr grid-cols-3 justify-items-stretch gap-10'
              ' text-center font-mono text-sm leading-6 font-bold text-white',
              children: [
                for (var i = 1; i <= 3; i++)
                  Style(
                    'grid grid-cols-1 justify-items-center',
                    children: [
                      Stripes(
                        'col-start-1 row-start-1 justify-self-stretch rounded-lg',
                        border: true,
                      ),
                      Style(
                        'col-start-1 row-start-1 size-14 rounded-lg bg-indigo-500 p-4',
                        child: Text(i.toString().padLeft(2, '0')),
                      ),
                    ],
                  ),
              ],
            ),
          ],
        ),
        Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            const Style(
              'text-center font-mono text-xs font-medium'
              ' text-gray-500 dark:text-gray-400',
              child: Text('justify-items-center-safe'),
            ),
            Style(
              'mt-4 grid auto-rows-fr grid-cols-3 justify-items-stretch gap-10'
              ' text-center font-mono text-sm leading-6 font-bold text-white',
              children: [
                for (var i = 1; i <= 3; i++)
                  Style(
                    'grid grid-cols-1 justify-items-center-safe',
                    children: [
                      Stripes(
                        'col-start-1 row-start-1 justify-self-stretch rounded-lg',
                        border: true,
                      ),
                      Style(
                        'col-start-1 row-start-1 size-14 rounded-lg bg-fuchsia-500 p-4',
                        child: Text(i.toString().padLeft(2, '0')),
                      ),
                    ],
                  ),
              ],
            ),
          ],
        ),
      ],
    );
  }
}

class JustifyItemsCenterPage extends StatelessWidget {
  const JustifyItemsCenterPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(body: const JustifyItemsCenterExample());
  }
}

End

Use justify-items-end to align grid items against the end of their inline axis.

class JustifyItemsEndExample extends StatelessWidget {
  const JustifyItemsEndExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Style(
      'grid grid-cols-1 gap-8',
      children: [
        Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            const Style(
              'text-center font-mono text-xs font-medium'
              ' text-gray-500 dark:text-gray-400',
              child: Text('justify-items-end'),
            ),
            Style(
              'mt-4 grid auto-rows-fr grid-cols-3 justify-items-stretch gap-10'
              ' text-center font-mono text-sm leading-6 font-bold text-white',
              children: [
                for (var i = 1; i <= 3; i++)
                  Style(
                    'grid grid-cols-1 justify-items-end',
                    children: [
                      Stripes(
                        'col-start-1 row-start-1 justify-self-stretch rounded-lg',
                        border: true,
                      ),
                      Style(
                        'col-start-1 row-start-1 size-14 rounded-lg bg-blue-500 p-4',
                        child: Text(i.toString().padLeft(2, '0')),
                      ),
                    ],
                  ),
              ],
            ),
          ],
        ),
        Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            const Style(
              'text-center font-mono text-xs font-medium'
              ' text-gray-500 dark:text-gray-400',
              child: Text('justify-items-end-safe'),
            ),
            Style(
              'mt-4 grid auto-rows-fr grid-cols-3 justify-items-stretch gap-10'
              ' text-center font-mono text-sm leading-6 font-bold text-white',
              children: [
                for (var i = 1; i <= 3; i++)
                  Style(
                    'grid grid-cols-1 justify-items-end-safe',
                    children: [
                      Stripes(
                        'col-start-1 row-start-1 justify-self-stretch rounded-lg',
                        border: true,
                      ),
                      Style(
                        'col-start-1 row-start-1 size-14 rounded-lg bg-purple-500 p-4',
                        child: Text(i.toString().padLeft(2, '0')),
                      ),
                    ],
                  ),
              ],
            ),
          ],
        ),
      ],
    );
  }
}

class JustifyItemsEndPage extends StatelessWidget {
  const JustifyItemsEndPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(body: const JustifyItemsEndExample());
  }
}

Stretch

Use justify-items-stretch to stretch grid items along their inline axis so each cell’s content fills its column width. The renderer suppresses the per-cell Align wrapper, letting the enclosing SizedBox(width: cellW) stretch each child.

Style('grid justify-items-stretch ...', children: [
  Text('01'),
  Text('02'),
  Text('03'),
  Text('04'),
  Text('05'),
  Text('06'),
])

Class reference

Class	Description
justify-items-start	Align grid items to the start of their inline axis.
justify-items-center	Align grid items along the center of their inline axis.
justify-items-end	Align grid items against the end of their inline axis.
justify-items-stretch	Stretch grid items along their inline axis (cells fill width).
justify-items-normal	(parity omitted)
justify-items-center-safe, justify-items-end-safe	(parity omitted)

Parity omissions

• justify-items-normal — no Flutter equivalent: there’s no per-item normal-flow alignment override in Align / Wrap.
• justify-items-center-safe, justify-items-end-safe — Flutter has no overflow-fallback alignment concept (the CSS safe keyword aligns to start when items would overflow).