width

Setting an element’s width.

Overview

Examples

Set a fixed or fluid width

Use w:* to set the CSS width property. Values can come from the sizing scale, percentages, keywords, container variables, native units, or CSS functions.

<aside class="w:3xs">...</aside><main class="w:full max-w:5xl">...</main>

@layer theme {  :root {    --container-5xl: 64rem  }}@layer utilities {  .max-w\:5xl {    max-width: var(--container-5xl)  }  .w\:64x {    width: 16rem  }  .w\:full {    width: 100%  }}

Use percentages for proportional layout

Percentages are useful for split panels and simple responsive columns.

<div class="w:full w:50%@sm">  ...</div>

Percentages follow native CSS behavior: the percentage is based on the containing block.

Use intrinsic width keywords

Use w:fit, w:min, and w:max when the element should size itself from its content.

<button class="w:fit px:sm">  Compact action</button>

Use container widths for wrappers

w:* uses container size theme tokens. In page layout, it is usually paired with max-w:* or w:full so the wrapper can shrink on smaller containers.

<main class="w:full max-w:7xl mx:auto">  ...</main>

Apply conditionally

Apply styles based on different states using selectors and conditional queries.

<div class="w:full w:fit:hover w:full@print w:50%@sm">...</div>

For both axes at once, use size. For upper and lower bounds, use max-width and min-width.