Ask any LLM to style a layout and it uses CSS units like: px , rem , em , % and vh . So do you, out of habit. But CSS has grown its number of units. Ones that fit specific jobs way better than your old defaults. Here are seven your code generator has probably never suggested.

They are all baseline ready (e.g. supported by core browsers for at least 30 months), so there is no fallback excuse left. Let’s get into it.

Logical properties: think in axes (x and y)

A few of these units only make sense when you drop the ideas of “width” and “height” and think in axes instead . CSS now measures along the inline axis (the direction your text flows, left to right in, for example, English) and the block axis (the direction blocks stack, top to bottom). Once that makes sense, units like vi , vb and cqi will be less weird. 💡

Full screen height: dvh

100vh includes the space behind the browser’s address bar, so a full height hero can get clipped the moment the bar shows up.…