Width & Height

§Numeric dimensions

w-n, h-n and size-n map directly to n × --size-base - w-48 is 48 × 4px = 192px at the default root. Width and height are physical axes, matching their CSS names, and density does not change them.

§Fractions and full width

w-1/2, w-1/3, w-2/3, w-1/4, w-3/4 and w-full size against the containing block. Percentage heights like h-1/2 need a definite containing height.

The classic sidebar/main split - resize the demo with the toolbar and watch it adapt:

§Content-based sizing

w-auto defers to the layout algorithm; w-fit shrinks to the content; w-min and w-max use the content's minimum and maximum intrinsic widths. These are the right tools for badges, chips and buttons that should hug their label.

§Constraints: min, max and none

Dimensions are constraints, not clipping. max-w-* caps a box without narrowing the page below the cap; min-h-* guarantees a floor while content can grow past it; max-w-none removes a cap a component shipped with.

In flex layouts a requested width may shrink: add shrink-0 when that is intentional, and put min-w-0 on the flexible child so long content wraps instead of widening the page:

A constrained box turns its overflow into a scrollbar with overflow-x-auto; pair it with whitespace-nowrap on the content so wide rows scroll instead of wrapping into a mess:

§Logical dimensions

inline-* and block-* mirror the numeric scale on the writing-mode axes: inline is width in horizontal writing, height in vertical writing. Below, the same classes - inline-40 block-24 ps-4 - in three contexts. The filled area is the content box; the gap the ps-4 leaves follows inline-start: left in LTR, right in RTL, top in vertical writing.

§Viewport sizes and the app shell

h-screen / min-h-screen / max-h-screen are 100vh, with dvh, svh and lvh variants for mobile browser chrome. Their classic use is the app shell - header, fluid content, footer at the bottom even with little content. The demo renders that pattern inside a fixed-height frame; at page level you would write min-h-screen instead of h-full.

Prefer dvh units when content must survive the mobile URL bar collapsing. w-screen is 100vw - it includes the scrollbar and ignores the parent, so w-full is usually the right choice inside a page.

§Real world: a fixed sidebar and a fluid main

The most common layout on the web: a fixed-width sidebar that never squishes (w-56 shrink-0) next to a main region that takes whatever is left (flex-1 min-w-0). Resize with the toolbar - the sidebar holds 224px while the main column gives.

§Real world: profile rows

A comment/mention row: square avatar (size-10 shrink-0), text that can shrink and wrap (flex-1 min-w-0), and a timestamp that never wraps (shrink-0). Every width on the row is one of the utilities from this page.

§Available classes

The numeric scale, rendered - every bar below is its real class at the default 4px base. Values not listed require ordinary CSS. size-4 sets both width and height; it does not set flex-shrink or box-sizing.

§Application-specific sizes

Values outside the scale are ordinary CSS - a clamped inspector panel and an optimal reading width. Resize with the toolbar: the inspector's clamp() tracks the frame width while the prose column stays at its measure.

.inspector { width: clamp(16rem, 30vw, 24rem); }

.application-shell { min-height: 100dvh; }

.article-copy { max-inline-size: 70ch; }

Keep content widths, typography and control recipes semantically distinct from the small geometric --size-xs…xl aliases. Load sizing.css; load layout.css as well for Flex/Grid helpers.

§Platform references

CSS Values and Units · CSS logical properties

Comments, ideas or improvements? Edit this page's source on GitHub