Grid Template Rows

Utilities for specifying how many equal-height rows a grid layout has.

Specifying the rows

Use grid-rows-<number> to declare an explicit row count. The numeric form is generative and unbounded — any positive integer works (grid-rows-2, grid-rows-13, grid-rows-99). Combine with grid-flow-col so items flow top-to-bottom into the fixed rows, auto-generating columns to the right (ceil(itemCount / rows) columns). Use grid-rows-none to reset.

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

Using arbitrary values

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

Style('grid grid-flow-col grid-rows-[5] gap-4', children: [
  Text('01'),
  // ...
  Text('09'),
])

Class reference

Class	Description
grid-rows-none	Reset to the implicit (single-row) grid flow.
grid-rows-<number>	N equal-height rows — any positive integer (e.g. grid-rows-2, grid-rows-13, grid-rows-99).
grid-rows-[<value>]	Arbitrary integer row count (e.g. grid-rows-[5]).

Parity omissions

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

• grid-rows-subgrid — there is no Flutter analogue for CSS subgrid.
• CSS-template arbitrary forms like grid-rows-[1fr_2fr], grid-rows-[repeat(3,minmax(0,1fr))], or grid-rows-[200px_minmax(900px,1fr)_100px]. The arbitrary form accepts integers only.

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