width

Set physical width with fixed, proportional or intrinsic values.

Overview

Examples

Set a fixed or fluid width

w:* sets the physical width. Compare a fixed w:12rem (192px with the default 4px unit) with w:100% inside the same 280px containing block. Percentages follow the parent; a fixed width does not.

<!-- Fixed · 192px --><div id="layout" class="w:17.5rem max-w:100%" role="group" aria-label="Available space">  <div id="target" class="w:12rem p-sm">Fixed width</div></div>

<!-- Fluid · 100% --><div id="layout" class="w:17.5rem max-w:100%" role="group" aria-label="Available space">  <div id="target" class="w:100% p-sm">Full width</div></div>

Widths use the configured sizing scale, container tokens, native units or functions. These examples use border-box sizing, so the displayed width includes padding. See box-sizing for the content-box alternative.

Use percentages for proportional layout

w:50% takes half the containing block’s width. The same class resolves to 140px in a 280px parent and 100px in a 200px parent. No breakpoint is needed for this proportional behavior.

<!-- Parent · 280px --><div id="layout" class="w:17.5rem max-w:100%" role="group" aria-label="Available space">  <div id="target" class="w:50% p-sm">50%</div></div>

<!-- Parent · 200px --><div id="layout" class="w:12.5rem max-w:100%" role="group" aria-label="Available space">  <div id="target" class="w:50% p-sm">50%</div></div>

Use intrinsic width keywords

w:min-content uses the narrowest width allowed by the content’s normal wrap opportunities. w:max-content keeps the text on one unwrapped line. w:fit-content uses available space between those bounds. Compare the same words inside 112px parents.

<!-- Minimum content --><div id="layout" class="w:7rem" role="group" aria-label="Available space">  <div id="target" class="w:min-content p-sm font-md font-mono leading:24px">Design systems</div></div>

<!-- Fit content --><div id="layout" class="w:7rem" role="group" aria-label="Available space">  <div id="target" class="w:fit-content p-sm font-md font-mono leading:24px">Design systems</div></div>

<!-- Maximum content --><div id="layout" class="w:7rem" role="group" aria-label="Available space">  <div id="target" class="w:max-content p-sm font-md font-mono leading:24px">Design systems</div></div>

An intrinsic width can exceed its parent when even the smallest unbreakable piece is too wide. Wrapping, clipping and scrolling are separate decisions.

Use container widths for wrappers

Combine w:100% with a container-token maximum and automatic inline margins. This wrapper fills the available space until max-w-3xs caps it at 256px in the default theme; mx:auto divides any remaining inline space equally.

<div id="layout" class="w:100%" role="group" aria-label="Available space">  <div id="target" class="w:100% max-w-3xs mx:auto p-sm">Centered wrapper</div></div>

Use a larger container token for a full page. The small token here makes the cap visible in the documentation column; project theme declarations can change token values.

Apply conditionally

Use conditional queries to change the preferred width. Resize the real iframe past sm: the blue panel changes from its parent’s full 280px width to 50%, or 140px.

<div id="layout" class="w:17.5rem max-w:100%" role="group" aria-label="Available space">  <div id="target" class="w:100% p-sm w:50%@sm">Responsive panel</div></div>

For both physical axes, use size. For bounds, use min-width and max-width.