Grid Column

Utilities for controlling how grid items span and where they start and end across grid columns. The numeric forms are generative and unbounded — any positive integer works (col-span-2, col-span-13, col-start-99, etc.).

Spanning columns

Use col-span-<number> to make an element span the specified number of columns. col-span-full spans all columns of the parent grid.

Style('grid grid-cols-3 gap-4', children: [
  Style('...', child: Text('01')),
  Style('...', child: Text('02')),
  Style('...', child: Text('03')),
  Style('col-span-2 ...', child: Text('04')),
  Style('...', child: Text('05')),
  Style('...', child: Text('06')),
  Style('col-span-2 ...', child: Text('07')),
])

Starting and ending lines

Use col-start-<number> and col-end-<number> to position a grid item at a specific column line. When both are set without an explicit col-span, the item’s effective width is derived as end − start (CSS exclusive-end semantics, so col-start-1 col-end-3 is two columns wide).

Because the renderer is Wrap-based and lays children out sequentially, col-start / col-end only contribute to the item’s width; they do not move the item to a specific cell. To demonstrate column placement visually, fill the empty cells with explicit placeholder tiles. Tailwind’s docs do the same with their <Stripes> placeholders.

Style('grid grid-cols-6 gap-4', children: [
  Style('col-span-4 col-start-2 ...', child: Text('01')),
  Style('col-start-1 col-end-3 ...', child: Text('02')),
  Style('col-span-2 col-end-7 ...', child: Text('03')),
  Style('col-start-1 col-end-7 ...', child: Text('04')),
])

Using arbitrary values

The bracket form accepts any positive integer for each placement utility:

Style('col-span-[7]', child: ...)       // colSpan = 7
Style('col-start-[2]', child: ...)      // colStart = 2
Style('col-end-[5]', child: ...)        // colEnd = 5
Style('col-[3]', child: ...)            // bare shorthand → colStart = 3

Class reference

Class	Description
col-auto	Clear explicit placement; the item takes the next available cell.
col-<number>	Bare shorthand — equivalent to col-start-<number> (CSS grid-column: <N> resolves to start <N> with auto end).
col-[<value>]	Arbitrary integer alias for col-start-[<value>].
col-span-<number>	Span the specified number of columns (any positive integer).
col-span-full	Span across all columns of the parent grid.
col-span-[<value>]	Arbitrary integer column span (e.g. col-span-[5]).
col-start-<number>	Start at the specified column line (any positive integer).
col-start-auto	Clear an inherited start line.
col-start-[<value>]	Arbitrary integer start line (e.g. col-start-[3]).
col-end-<number>	End at the specified column line — exclusive, per CSS grid semantics.
col-end-auto	Clear an inherited end line.
col-end-[<value>]	Arbitrary integer end line (e.g. col-end-[7]).

Parity omissions

Flutter’s grid renderer is built on Wrap rather than CSS Grid, so a few Tailwind v4 forms have no analogue and are intentionally unsupported:

• Negative-prefix indices -col-<N>, -col-start-<N>, -col-end-<N> — these rely on counting back from the end of the explicit grid, a concept that doesn’t exist in the Wrap renderer.
• Real grid cell-skipping — col-start-N and col-end-N only contribute to width via the derived span. Tiles are placed sequentially in source order, so to land an item at a specific column you fill the preceding cells with explicit placeholder tiles (as demonstrated in “Starting and ending lines” above).

CSS-variable forms col-(<custom-property>), col-span-(<custom-property>), col-start-(<custom-property>), col-end-(<custom-property>) are resolved against theme-defined StyleThemeData.customProperties — e.g. col-(--my-col) behaves like col-[3] when the theme defines --my-col: '3'. Cascade-inherited or JS-set CSS variables remain out of scope.