Grid Template Columns

Utilities for specifying how many equal-width columns a grid layout has.

Specifying the columns

Use grid-cols-<number> to create an explicit grid with N equal-width columns. The numeric form is generative and unbounded — any positive integer works (grid-cols-2, grid-cols-13, grid-cols-99). Use grid-cols-none to reset to the implicit single-column flow.

Style('grid grid-cols-4 gap-4', children: [
  Text('01'),
  // ...
  Text('09'),
])

Using arbitrary values

The bracket form grid-cols-[<value>] accepts any positive integer column count, useful when the column count is computed or otherwise unsuitable for a static utility.

Style('grid grid-cols-[7] gap-4', children: [
  Text('01'),
  // ...
  Text('09'),
])

Class reference

Class	Description
grid-cols-none	Reset to the implicit (single-column) grid flow.
grid-cols-<number>	N equal-width columns — any positive integer (e.g. grid-cols-2, grid-cols-13, grid-cols-99).
grid-cols-[<value>]	Arbitrary integer column count (e.g. grid-cols-[7]).

Parity omissions

Flutter has no CSS Grid engine, so the renderer assumes equal-width columns. The following Tailwind v4 forms are intentionally not supported:

• grid-cols-subgrid — there is no Flutter analogue for CSS subgrid.
• CSS-template arbitrary forms like grid-cols-[1fr_2fr], grid-cols-[repeat(3,minmax(0,1fr))], or grid-cols-[200px_minmax(0,1fr)_100px]. The arbitrary form accepts integers only. The single named pattern grid-cols-[auto_minmax(0,1fr)] is preserved as a backward-compatible alias and renders via a custom widget.

grid-cols-(<custom-property>) is resolved against theme-defined StyleThemeData.customProperties for the plain positive-integer form — e.g. grid-cols-(--my-cols) behaves like grid-cols-[7] when the theme defines --my-cols: '7'. The CSS-template forms above still have no Flutter analogue regardless of source; cascade-inherited or JS-set CSS variables remain out of scope.