Grid

Columns, rows and gaps, set in one class.

grid makes an element a grid container. Add modifiers for columns, rows and gaps.

Modifier	Values	Compiles to	Example
Columns	`cols-1` to `cols-12`, or `cols-1-fr` to `cols-12-fr`	`grid-template-columns`	`grid:cols-3`
Rows	`rows-1` to `rows-12`, or `rows-1-fr` to `rows-12-fr`	`grid-template-rows`	`grid:rows-2`
Gap	`gap-` plus a spacing token	`gap`	`grid:gap-d4`
Column gap	`colgap-` plus a spacing token	`column-gap`	`grid:colgap-d6`
Row gap	`rowgap-` plus a spacing token	`row-gap`	`grid:rowgap-d2`

cols-3 compiles to repeat(3,auto), which sizes columns by their content, so wider content gets a wider column. cols-3-fr compiles to repeat(3,1fr): equal columns that share the space.

<div class="grid:cols-3-fr:gap-d4">…</div>

For card grids that reflow on their own, see grid-auto.

Spanning

col-spans and row-spans place an item between two grid lines. Lines are numbered from 1, and the end line isn’t included, so from-1:to-3 covers two columns.

Property	Modifiers	Compiles to	Example
`col-spans`	`from-` and `to-` plus a number	`grid-column-start`, `grid-column-end`	`col-spans:from-1:to-3`
`row-spans`	`from-` and `to-` plus a number	`grid-row-start`, `grid-row-end`	`row-spans:from-2:to-4`
`col-spans-all`	none (standalone)	`grid-column: 1 / -1`	`col-spans-all`
`row-spans-all`	none (standalone)	`grid-row: 1 / -1`	`row-spans-all`

<div class="grid:cols-3-fr:gap-d4">
  <header class="col-spans-all">…</header>
  <main class="col-spans:from-1:to-3">…</main>
  <aside>…</aside>
</div>

Named areas and auto tracks

These take literal CSS in parentheses, with _ for spaces.

Property	Compiles to	Example
`grid-template-areas`	`grid-template-areas`	`grid-template-areas:('head_head'_'side_main')`
`grid-area`	`grid-area`	`grid-area:(head)`
`auto-col`	`grid-auto-columns`	`auto-col:(minmax(100px,_auto))`
`auto-row`	`grid-auto-rows`	`auto-row:(minmax(20%,_80vmax))`
`auto-flow`	`grid-auto-flow`	`auto-flow:(row_dense)`

<div class="grid:cols-2-fr:gap-d4 grid-template-areas:('head_head'_'side_main')">
  <header class="grid-area:(head)">…</header>
  <nav class="grid-area:(side)">…</nav>
  <main class="grid-area:(main)">…</main>
</div>