Sizing

Choose fluid dimensions, measured sizes, container caps, constraints, and responsive sizing rules for stable layouts.

Overview

Sizing describes the space an element should claim, the limits it should respect, and the boundary where that decision changes. In CSS this includes width, height, min and max constraints, intrinsic keywords, percentages, viewport units, container values, and CSS functions.

Master CSS keeps sizing decisions close to the element that owns them. Use w:* and h:* for one axis, size:* when both axes intentionally match, min-* and max-* for constraints, container tokens for shared layout surfaces, and responsive variants when the size changes by viewport or container.

Choose a sizing role

A sizing class should have one clear job. It can set the preferred size, keep an element from collapsing, cap growth, tie both axes together, or move the decision to a responsive boundary.

Use one-axis rules when the element is rectangular by role. Use size:*, min:*, or max:* only when both axes genuinely share the same decision.

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

@layer theme {    :root {        --container-7xl: 80rem    }}@layer utilities {    .mx\:auto {        margin-inline: auto    }    .max-w\:7xl {        max-width: var(--container-7xl)    }    .min-h\:100dvh {        min-height: 100dvh    }    .w\:full {        width: 100%    }}

Start fluid, then constrain

Most layout should fill the space it receives and then stop at a cap. A fluid wrapper with w:full max-w:* behaves better across viewports than one fixed width that only fits one screen.

<main class="w:full max-w:7xl mx:auto px:md px:xl@md">    ...</main><article class="w:full max-w:72ch">    ...</article>

@layer theme {    :root {        --container-7xl: 80rem;        --spacing-md: 1rem;        --spacing-xl: 2rem    }}@layer utilities {    .mx\:auto {        margin-inline: auto    }    .px\:md {        padding-inline: var(--spacing-md)    }    .max-w\:7xl {        max-width: var(--container-7xl)    }    .max-w\:72ch {        max-width: 72ch    }    .w\:full {        width: 100%    }    @media (width>=64rem) {        .px\:xl\@md {            padding-inline: var(--spacing-xl)        }    }}

Use w:full when the element should follow its parent, percentages such as w:50% for proportional regions, max-w:* for caps, and CSS functions such as clamp() when the bound itself should be fluid.

<aside class="w:full w:50%@sm">...</aside><section class="w:clamp(18rem,50vw,42rem)">...</section>

Percentage widths and heights follow native CSS behavior. The parent needs a definite height before h:full or h:50% can resolve predictably.

Use container tokens

Sizing utilities read the container namespace contextually. w:md, max-w:5xl, size:sm, min-w:xs, and flex-basis:lg use --container-* tokens without repeating the namespace in markup.

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

@layer theme {    :root {        --container-5xl: 64rem;        --container-md: 28rem    }}@layer utilities {    .mx\:auto {        margin-inline: auto    }    .max-w\:5xl {        max-width: var(--container-5xl)    }    .max-w\:full {        max-width: 100%    }    .w\:full {        width: 100%    }    .w\:md {        width: var(--container-md)    }}

Use container tokens for shared layout surfaces: page wrappers, panels, modals, sidebars, drawer widths, and component caps. Use local ch, x, or CSS functions when the dimension belongs to content measure or one component's private geometry.

For the full container namespace and query model, see containers.

Use measured sizes

The x suffix multiplies the base unit, which defaults to 4 pixels. For example, 1x is 0.25rem, 4x is 1rem, and 10x is 2.5rem.

Use x values for measured component geometry such as icons, avatars, handles, skeleton blocks, and fixed media slots. For page structure, reach for w:full, percentages, container tokens, viewport units, text units, or clamp() first.

<img class="size:10x round object-cover" src="..." alt="" /><figure class="w:36x h:20x">...</figure>

@layer utilities {    .size\:10x {        width: 2.5rem;        height: 2.5rem    }    .h\:20x {        height: 5rem    }    .w\:36x {        width: 9rem    }}

Pair axes deliberately

size:* is not a shorter way to avoid thinking about dimensions. It is the right tool when an element is square by design.

<button class="size:14x grid place-content:center">...</button><div class="w:full h:14x">...</div>

@layer utilities {    .size\:14x {        width: 3.5rem;        height: 3.5rem    }    .h\:14x {        height: 3.5rem    }    .w\:full {        width: 100%    }}

When an element should keep a non-square ratio, use aspect ratio with a width instead of locking both dimensions.

<video class="w:full aspect-ratio:16/9" controls></video>

Constrain instead of forcing

Min and max rules are often more stable than fixed widths. They let content, containers, and responsive variants negotiate space without overflow.

<article class="flex gap:md max-w:96x">    <img class="size:10x flex:0" alt="" />    <div class="min-w:0">Long content...</div></article>

@layer theme {    :root {        --spacing-md: 1rem    }}@layer utilities {    .flex {        display: flex    }    .flex\:0 {        flex: 0    }    .gap\:md {        gap: var(--spacing-md)    }    .size\:10x {        width: 2.5rem;        height: 2.5rem    }    .max-w\:96x {        max-width: 24rem    }    .min-w\:0 {        min-width: 0    }}

In flex and grid layouts, min-w:0 is the common fix for text or media that refuses to shrink. Without it, intrinsic content can force a row wider than its container even when the parent has a max width.

Use min-h:* for baseline regions that may grow, such as app shells, empty states, and hero sections. Use max-h:* for scrollable panels, menus, and media regions that must stay inside the viewport.

Adapt at the right boundary

Sizing classes can use the same breakpoints, containers, selectors, and media queries as other utilities. Choose the boundary that owns the decision.

<section class="w:full w:50%@sm max-w:7xl@lg">...</section><article class="container">    <button class="size:8x size:10x@container(md)">...</button></article>

@layer theme {    :root {        --container-7xl: 80rem    }}@layer utilities {    .container {        container-type: inline-size    }    .size\:8x {        width: 2rem;        height: 2rem    }    .w\:full {        width: 100%    }    @container (width>=28rem) {        .size\:10x\@container\(md\) {            width: 2.5rem;            height: 2.5rem        }    }    @media (width>=52.125rem) {        .w\:50\%\@sm {            width: 50%        }    }    @media (width>=80rem) {        .max-w\:7xl\@lg {            max-width: var(--container-7xl)        }    }}

Use viewport breakpoints when the whole page shell changes. Use container queries when a reusable component should adapt to the space it receives in a sidebar, modal, card grid, or main content column.

Customize sizing tokens

When a dimension becomes part of the product language, add a named container variable in the project CSS entry. Use explicit CSS lengths for fixed values; functions are preserved.

@theme {    --container-sidebar: 17.5rem;    --container-measure: 72ch;    --container-panel: clamp(18rem, 50vw, 42rem);}

<aside class="w:sidebar">...</aside><article class="max-w:measure">...</article><section class="w:panel">...</section>

Use descriptive names such as sidebar, measure, panel, or media instead of numeric keys. Numeric keys are easy to confuse with raw values such as w:1px or w:2px.

Avoid brittle sizing

A page wrapper is fixed, so small screens overflow.

<main class="w:320x">...</main>

The wrapper fills available space and stops at a shared cap.

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

A square component repeats separate width and height values that can drift.

<button class="w:10x h:12x">...</button>

The component uses one sizing decision.

<button class="size:10x">...</button>

A flex child has a max width, but its content can still force overflow.

<div class="flex">    <main class="max-w:5xl">Long unbroken content...</main></div>

The flexible child is allowed to shrink.

<div class="flex">    <main class="min-w:0 max-w:5xl">Long unbroken content...</main></div>