@container
Applies rules depending on the size of a container rather than the window.
Syntax
@container (min-width: 400px) { … }Parameters
| Parameter | Type | Description |
|---|---|---|
| container-type | inline-size | Set on the parent: `inline-size` makes it a container by width. |
| container-name | name | A name, to query a specific container: `@container sidebar (…)`. |
| (min-width: …) | condition | The condition on the container's size. |
| cqi | unit | A unit: 1% of the container's width. |
Examples
A card that changes its layout with the width of its box:
<style>
.wrap { container-type: inline-size; resize: horizontal; overflow: auto; border: 1px dashed gray; width: 260px; }
.card { display: grid; gap: 8px; padding: 8px; }
.card img { width: 100%; }
@container (min-width: 350px) {
.card { grid-template-columns: 120px 1fr; }
}
</style>
<div class="wrap">
<div class="card">
<img src="/media/photo-400x250.jpg" alt="">
<p>Drag the corner to widen the box — the card switches to two columns.</p>
</div>
</div>Notes
Container queries make components independent of where they are placed: the same card works in a narrow sidebar and in a wide content area. The rule cannot style the container itself — only its descendants. Supported in all current browsers since 2023.
See also
- @media — Applies rules only under given conditions — the window width, the system theme and others.
- px, em, rem, %, vw, vh — Units for lengths in CSS: absolute pixels and relative units.
- grid-template-columns — The number and widths of the columns of a grid.
Related recipes
In the tutorial
- Container queries — How a component adapts to the width of its block rather than the window — container-type, the @container rule, container names and cqi units.