Container

Makes its box the thing a container query measures, so what is inside can respond to its width instead of the viewport's.

Example

<div class="container">
    <nav class="cluster" aria-label="Site">
        <a href="#">Home</a>
        <a href="#">Docs</a>
    </nav>
</div>

When to use it

Around anything that should change shape at its own width, when the thing itself cannot measure its own box. A layout can query itself and change its children, but nothing can change its own tracks from inside its own query; wrap it in a container and query that.

How it works

One declaration: the box becomes a size container. Nothing else. To target it by name in your own CSS, give the container a name in your stylesheet, since a name cannot come from an attribute:

.container.sidebar-slot { container-name: slot; }
@container slot (inline-size < 30rem) { .cluster { flex-direction: column; } }

The Yeti layouts that query themselves (grid with data-fold, breakout with notes, timeline) do not need one; this is for your own queries and for components that must restyle themselves.

Why this name

It contains, and it is what a container query measures. Foundation 6's .grid-container was a page column; that job is center.

Attributes

None. This is configured through its children and tokens only.

Children

• > *: at least 1. Anything. The container itself arranges nothing.

Tokens

No public tokens.

Accessibility

• Purely structural.

Browser support

• Used without guards: container size queries
• Behind @supports: nothing

JavaScript

None. This component is CSS only.

Available since 7.0.0.