Grid System

The examples below demonstrate the CSS Grid based columns system: track widths, offsets, alignment, and per-breakpoint overrides.

Basic Columns

When no "columns" value is set for a row, it auto-calculates: the track count is the number of columns at the widest breakpoint, then each narrower breakpoint steps down by a ratio (floored at 1). None of the rows below set a "columns" value - each is left entirely to the auto ladder.

Three columns (xl: 3, lg: 2, md: 1, sm: 1):

Four columns (xl: 4, lg: 3, md: 2, sm: 1):

Six columns (xl: 6, lg: 4, md: 2, sm: 1):

Eight columns (xl: 8, lg: 5, md: 3, sm: 2):

Ten columns (xl: 10, lg: 7, md: 4, sm: 3):

Twelve columns (xl: 12, lg: 8, md: 4, sm: 3):

Column Widths & Offsets

A 12 track row. The first column spans 6 tracks; the second spans 4 tracks but starts at track 8, leaving a 1 track offset between them.

Alignment

The row is set to center-align its columns vertically. The third column overrides this and aligns itself to the end instead, regardless of the row default.

Responsive Overrides

Column options set at a smaller breakpoint cascade up to larger ones unless overridden. Resize the browser to see each column change independently.