This is the Standard reference for grids.
It follows the authored TeaCSS vocabulary at source revision
fa3709a for package version 0.7.1.
Each value list gives finite examples and named values for its prefixes. A
bracket or variable example demonstrates that open form for the same prefix;
the listed arbitrary literals are samples, not every accepted literal. Check
the Storybook token reference for more examples,
and do not infer support from a different prefix.
grid-areas
Interactive example.
Prefixes: grid-areas. Example: grid-areas:none. It emits grid-template-areas:none;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (3)
none, [quoted:a_a], $layout
grid-columns
Interactive example.
Prefixes: grid-columns. Example: grid-columns:none. It emits grid-template-columns:none;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (14)
none, subgrid, stretch, 1, 2, 3, 4, 5, 6, 7, 8, 9,
[1fr_2fr], $tracks
grid-rows
Interactive example.
Prefixes: grid-rows. Example: grid-rows:none. It emits grid-template-rows:none;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (14)
none, subgrid, stretch, 1, 2, 3, 4, 5, 6, 7, 8, 9,
[auto_1fr], $tracks
grid-auto-flow
Interactive example.
Prefixes: grid-auto-flow. Example: grid-auto-flow:row. It emits grid-auto-flow:row;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (5)
row, column, dense, row-dense, column-dense
grid-auto-columns
Interactive example.
Prefixes: grid-auto-columns. Example: grid-auto-columns:auto. It emits grid-auto-columns:auto;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (6)
auto, min, max, fr, [minmax(0,_1fr)], $track
grid-auto-rows
Interactive example.
Prefixes: grid-auto-rows. Example: grid-auto-rows:auto. It emits grid-auto-rows:auto;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (6)
auto, min, max, fr, [minmax(0,_1fr)], $track
grid-area
Interactive example.
Prefixes: grid-area. Example: grid-area:[1/1/2/3]. It emits grid-area:1/1/2/3;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (4)
[1/1/2/3], [a], auto, $area
grid-column
Interactive example.
Prefixes: grid-column. Example: grid-column:[1/3]. It emits grid-column:1/3;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (4)
[1/3], [span_2/auto], auto, $line
grid-column-span
Interactive example.
Prefixes: grid-column-span. Example: grid-column-span:1. It emits grid-column:span 1/span 1;.
Documented values (3)
1, 2, 3
grid-column-start
Interactive example.
Prefixes: grid-column-start. Example: grid-column-start:1. It emits grid-column-start:1;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (6)
1, 2, -1, auto, [span_2], $line
grid-column-end
Interactive example.
Prefixes: grid-column-end. Example: grid-column-end:1. It emits grid-column-end:1;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (6)
1, 3, -1, auto, [span_2], $line
grid-row
Interactive example.
Prefixes: grid-row. Example: grid-row:[1/3]. It emits grid-row:1/3;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (4)
[1/3], [span_2/auto], auto, $line
grid-row-span
Interactive example.
Prefixes: grid-row-span. Example: grid-row-span:1. It emits grid-row:span 1/span 1;.
Documented values (3)
1, 2, 3
grid-row-start
Interactive example.
Prefixes: grid-row-start. Example: grid-row-start:1. It emits grid-row-start:1;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (6)
1, 2, -1, auto, [span_2], $line
grid-row-end
Interactive example.
Prefixes: grid-row-end. Example: grid-row-end:1. It emits grid-row-end:1;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (6)
1, 3, -1, auto, [span_2], $line