This is the Standard reference for grids.
The vocabulary comes from the teacss-ts Storybook at revision
9de266d for package version 0.10.11.
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