寬度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:64x">...</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:50%@sm w:fit:hover w:full@print">...</div>

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