This is the Standard reference for sizing.
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.
width
Interactive example.
Vocabulary 1. Prefixes: w, min-w. Example: w:auto. It emits width:auto;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (41)
auto, 1c, 2c, 3c, 4c, 5c, 6c, 7c, 8c, 9c, 1x, 2x,
3x, 4x, 5x, 6x, 7x, 8x, 9x, screen, dvw, dvh, lvw, lvh,
svw, svh, min, max, fit, stretch, contain, 0, 0.5, 4, 1/2, 100%,
px, 10px, [calc(100%_-_2rem)], $size, $size|2px
Vocabulary 2. Prefixes: max-w. Example: max-w:1c. It emits max-width:var(--container-1c);. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (40)
1c, 2c, 3c, 4c, 5c, 6c, 7c, 8c, 9c, 1x, 2x, 3x,
4x, 5x, 6x, 7x, 8x, 9x, screen, dvw, dvh, lvw, lvh, svw,
svh, min, max, fit, stretch, contain, none, 0, 4, 1/2, 100%, px,
10px, [calc(100%_-_2rem)], $size, $size|2px
height
Interactive example.
Vocabulary 1. Prefixes: h, min-h. Example: h:auto. It emits height:auto;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (41)
auto, 1c, 2c, 3c, 4c, 5c, 6c, 7c, 8c, 9c, 1x, 2x,
3x, 4x, 5x, 6x, 7x, 8x, 9x, screen, dvw, dvh, lvw, lvh,
svw, svh, min, max, fit, stretch, contain, 0, 0.5, 4, 1/2, 100%,
px, 10px, [calc(100%_-_2rem)], $size, $size|2px
Vocabulary 2. Prefixes: max-h. Example: max-h:1c. It emits max-height:var(--container-1c);. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (40)
1c, 2c, 3c, 4c, 5c, 6c, 7c, 8c, 9c, 1x, 2x, 3x,
4x, 5x, 6x, 7x, 8x, 9x, screen, dvw, dvh, lvw, lvh, svw,
svh, min, max, fit, stretch, contain, none, 0, 4, 1/2, 100%, px,
10px, [calc(100%_-_2rem)], $size, $size|2px
inline-size
Interactive example.
Vocabulary 1. Prefixes: inline-size, min-inline-size. Example: inline-size:auto. It emits inline-size:auto;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (41)
auto, 1c, 2c, 3c, 4c, 5c, 6c, 7c, 8c, 9c, 1x, 2x,
3x, 4x, 5x, 6x, 7x, 8x, 9x, screen, dvw, dvh, lvw, lvh,
svw, svh, min, max, fit, stretch, contain, 0, 0.5, 4, 1/2, 100%,
px, 10px, [calc(100%_-_2rem)], $size, $size|2px
Vocabulary 2. Prefixes: max-inline-size. Example: max-inline-size:1c. It emits max-inline-size:var(--container-1c);. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (40)
1c, 2c, 3c, 4c, 5c, 6c, 7c, 8c, 9c, 1x, 2x, 3x,
4x, 5x, 6x, 7x, 8x, 9x, screen, dvw, dvh, lvw, lvh, svw,
svh, min, max, fit, stretch, contain, none, 0, 4, 1/2, 100%, px,
10px, [calc(100%_-_2rem)], $size, $size|2px
block-size
Interactive example.
Vocabulary 1. Prefixes: block-size, min-block-size. Example: block-size:auto. It emits block-size:auto;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (41)
auto, 1c, 2c, 3c, 4c, 5c, 6c, 7c, 8c, 9c, 1x, 2x,
3x, 4x, 5x, 6x, 7x, 8x, 9x, screen, dvw, dvh, lvw, lvh,
svw, svh, min, max, fit, stretch, contain, 0, 0.5, 4, 1/2, 100%,
px, 10px, [calc(100%_-_2rem)], $size, $size|2px
Vocabulary 2. Prefixes: max-block-size. Example: max-block-size:1c. It emits max-block-size:var(--container-1c);. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (40)
1c, 2c, 3c, 4c, 5c, 6c, 7c, 8c, 9c, 1x, 2x, 3x,
4x, 5x, 6x, 7x, 8x, 9x, screen, dvw, dvh, lvw, lvh, svw,
svh, min, max, fit, stretch, contain, none, 0, 4, 1/2, 100%, px,
10px, [calc(100%_-_2rem)], $size, $size|2px
dimensions
Interactive example. Rule type: composite.
Vocabulary 1. Prefixes: dimensions, min-dimensions. Example: dimensions:auto. It emits width:auto;height:auto;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (41)
auto, 1c, 2c, 3c, 4c, 5c, 6c, 7c, 8c, 9c, 1x, 2x,
3x, 4x, 5x, 6x, 7x, 8x, 9x, screen, dvw, dvh, lvw, lvh,
svw, svh, min, max, fit, stretch, contain, 0, 0.5, 4, 1/2, 100%,
px, 10px, [calc(100%_-_2rem)], $size, $size|2px
Vocabulary 2. Prefixes: max-dimensions. Example: max-dimensions:1c. It emits max-width:var(--container-1c);max-height:var(--container-1c);. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (40)
1c, 2c, 3c, 4c, 5c, 6c, 7c, 8c, 9c, 1x, 2x, 3x,
4x, 5x, 6x, 7x, 8x, 9x, screen, dvw, dvh, lvw, lvh, svw,
svh, min, max, fit, stretch, contain, none, 0, 4, 1/2, 100%, px,
10px, [calc(100%_-_2rem)], $size, $size|2px
size
Interactive example. Rule type: composite.
Vocabulary 1. Prefixes: size, min-size. Example: size:auto. It emits inline-size:auto;block-size:auto;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (41)
auto, 1c, 2c, 3c, 4c, 5c, 6c, 7c, 8c, 9c, 1x, 2x,
3x, 4x, 5x, 6x, 7x, 8x, 9x, screen, dvw, dvh, lvw, lvh,
svw, svh, min, max, fit, stretch, contain, 0, 0.5, 4, 1/2, 100%,
px, 10px, [calc(100%_-_2rem)], $size, $size|2px
Vocabulary 2. Prefixes: max-size. Example: max-size:1c. It emits max-inline-size:var(--container-1c);max-block-size:var(--container-1c);. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (40)
1c, 2c, 3c, 4c, 5c, 6c, 7c, 8c, 9c, 1x, 2x, 3x,
4x, 5x, 6x, 7x, 8x, 9x, screen, dvw, dvh, lvw, lvh, svw,
svh, min, max, fit, stretch, contain, none, 0, 4, 1/2, 100%, px,
10px, [calc(100%_-_2rem)], $size, $size|2px