Columns

Use columns-<N> and columns-<size> utilities to lay children out in a multi-column newspaper-flow grid. Children fill columns top-to-bottom in document order, and the layout balances column heights greedily — each column accumulates children until the next one would push it past the average column height.

Style('columns-3 ...', children: [
  Style('aspect-3/2 ...', child: Image.network('/img/mountains-1.jpg')),
  Style('aspect-square ...', child: Image.network('/img/mountains-2.jpg')),
  Style('aspect-square ...', child: Image.network('/img/mountains-3.jpg')),
  // ...
])

Class reference

Class	Behaviour
`columns-<N>`	N columns of equal width (any positive integer).
`columns-3xs`..`7xl`	Column width = container token (256px..1280px); count derived at layout.
`columns-auto`	Single column (browser auto behaviour).
`columns-[Xpx]`	Arbitrary column width.
`columns-[Xrem]`	Arbitrary column width (1rem = 16px).
`columns-(--var)`	Resolved via theme-defined `StyleThemeData.customProperties`; no-op if undefined.

Notes

CSS multi-column flow uses column-gap only; row-gap (and the gap-y-* shorthand) are ignored. Vertical spacing between siblings within a column comes from each child’s own margin (mb-* etc.).
Tailwind’s gap-[5cqw] (container-query units) has no Flutter analogue and silently resolves to null. Substitute a fixed gap-N.