Grid Auto Flow

Use grid-flow utilities to control how auto-placed items are inserted in the grid.

Basic example

Use utilities like grid-flow-col and grid-flow-row-dense to control how the auto-placement algorithm works for a grid layout. With grid-flow-row-dense, the implicit-grid algorithm backfills earlier holes left by larger items rather than only appending — tile 03 below slots into the empty cell at row 1 column 3 that would otherwise be left vacant by tile 02’s col-span-2 wrap.

Style('grid grid-flow-row-dense grid-cols-3 grid-rows-3 ...', children: [
  Style('col-span-2', child: Text('01')),
  Style('col-span-2', child: Text('02')),
  Text('03'),
  Text('04'),
  Text('05'),
])

Class reference

Class	Description
grid-flow-row	Place items by filling each row (the default).
grid-flow-col	Place items by filling each column. Combine with grid-rows-<N> for the canonical column-flow visual (real renderer support via _buildGridRows).
grid-flow-dense	Use a dense packing algorithm to backfill holes left by larger items.
grid-flow-row-dense	Fill rows using dense packing.
grid-flow-col-dense	Fill columns using dense packing.

Parity omissions

• grid-flow-row is the renderer’s default: it parses to StyleSpec.gridAutoFlow = GridAutoFlow.row but produces no visual difference compared to omitting the class entirely.
• grid-flow-dense, grid-flow-row-dense, and grid-flow-col-dense are parsed and stored on StyleSpec.gridAutoFlow for forward compatibility, but the Wrap-based grid renderer has no hole-filling / dense-packing analogue. The demo above mirrors Tailwind’s canonical grid-flow-row-dense visual by listing children in the order [01, 03, 02, 04, 05] so the natural row-first wrap places them in the same final cells the dense algorithm would. In Tailwind itself, the children would be authored in their semantic order [01, 02, 03, 04, 05] and the dense algorithm would do the rearrangement automatically.
• Only grid-flow-col paired with an explicit grid-rows-<N> track count produces a real, renderer-driven visual change (routed through _buildGridRows).