Overview
Use rem for type and spacing, ch for line length, dvh or svh for mobile full-height layouts, fr for grid tracks, and container units inside components. The wrong unit breaks on zoom, small screens, or dynamic browser toolbars.
Length units
Use rem for type and spacing, and px only for fixed details such as borders.
| Unit | Relative to | Use for |
|---|---|---|
px | CSS pixel | Borders, shadows, hairlines, media-query breakpoints. |
rem | Root font size | Type scale and spacing tokens. |
em | Current element’s font size | Padding and icon sizes that should scale with local text. |
ch | Width of 0 in the current font | Prose measure: max-width: 65ch. |
lh | Current line height | Vertical rhythm. |
% | Parent (see below) | Fluid widths. |
pt, cm, mm, in | Physical | Print stylesheets only. |
% resolves against a different property per context.
| Property | Resolves against |
|---|---|
width, horizontal margin and padding | Containing block width. |
height | Containing block height, only when that height is definite. |
font-size | Parent font size. |
line-height | The element’s own font size. |
translate() | The element’s own size. |
Viewport units
Use dvh or svh, not vh, for full-height layouts on mobile.
| Unit | Measures | Use for |
|---|---|---|
vw, vh | 1% of the viewport width, height | Fluid type, hero width. vh is the large viewport on mobile. |
vmin, vmax | 1% of the smaller, larger side | Orientation-proof squares and covers. |
svh, svw | Small viewport (toolbars shown) | Stable heights, fixed footers. |
lvh, lvw | Large viewport (toolbars hidden) | Elements that may grow as toolbars retract. |
dvh, dvw | Dynamic viewport | Full-screen shells: min-height: 100dvh. |
Container units
These need container-type: inline-size (or size) on an ancestor.
| Unit | 1% of the container’s |
|---|---|
cqi, cqb | Inline size, block size. |
cqw, cqh | Width, height. |
cqmin, cqmax | Smaller, larger dimension. |
Use them in component CSS so the component adapts to its slot; see css-container-queries.
Grid sizing
Use minmax(0, 1fr) when tracks must stay equal despite long content.
| Value | Meaning |
|---|---|
1fr | One share of free space after fixed tracks and gaps. |
minmax(0, 1fr) | A share that may shrink below its content. |
min-content, max-content | Narrowest and widest intrinsic size. |
fit-content(N) | min(max-content, max(min-content, N)). |
Gotchas
Avoid these; each breaks layouts on mobile, under zoom, or with long content.
| Gotcha | Fix |
|---|---|
100vh is taller than the visible area while mobile toolbars show. | Use 100dvh, or svh for a stable height. |
100vw includes the scrollbar and can cause horizontal scroll. | Use 100% for full-width blocks. |
height: 100% does nothing when the parent’s height is auto. | Give the parent a height, or use min-height: 100dvh. |
A bare 1fr track grows to fit long unbreakable content. | Use minmax(0, 1fr). |
em on font-size compounds through nesting. | Use rem for font sizes. |
Setting html { font-size } in px overrides the user’s preference. | Leave the root alone, or use 100%. |
ch differs per font. | Test the measure in the final typeface. |