Seven demos of CSS container queries: a card that rearranges in narrow and wide slots, headings that scale with cqi units, a named container, style queries on custom properties, one widget adapting to three slot sizes, a resizable box to test with and containers nested inside containers.
The same card component placed in a narrow and a wide slot: in the narrow one the image sits on top, in the wide one beside the text. The card's wrapper is the container, so the card responds to its slot, not to the window.
View code
<div class="cq1"><div class="slot n"><article class="card"><div class="im" aria-hidden="true"></div><div><b>Rain jacket</b><p>Packs into its own pocket.</p></div></article></div><div class="slot w"><article class="card"><div class="im" aria-hidden="true"></div><div><b>Rain jacket</b><p>Packs into its own pocket.</p></div></article></div></div>
cqi is one percent of the container's inline size, so clamp(18px, 8cqi, 40px) makes a headline scale with the box it sits in. Drag the handle on the box to resize it and the heading resizes with it, the text in the paragraph stays put.
View code
<div class="cq2"><p class="h">Drag the corner</p><p>The heading uses cqi units.</p></div>
With nested containers, a query matches the nearest one by default. container-name lets an inner component ask about a specific ancestor, here the sidebar, rather than its immediate wrapper.
@container style(--tone: warm) applies styles when an ancestor sets a custom property to a value, a way to theme components without extra classes. Browsers without style queries keep the default look, so it degrades gracefully.
A stat widget dropped into three slots of a dashboard: tiny, medium and wide. It shows only the number when tiny, adds a label when medium and adds a sparkline when wide, all from @container rules inside the component's own CSS.
A product tile inside a box you can resize by dragging its corner, so you can watch it switch between a stacked layout and a row as it crosses 300px. resize: horizontal with overflow: auto makes any element resizable for testing.
View code
<div class="cq6"><div class="tile"><div class="im" aria-hidden="true"></div><div class="tx"><b>Ceramic vase</b><p>$48 · In stock</p></div><button>Add</button></div></div>
A page region that is itself a container holds cards that are containers too. The region switches from one column to two at its own breakpoint, and each card then switches its inside layout at another, two independent levels of responsiveness.
View code
<section class="cq7"><div class="grid"><div class="cw"><article><span class="ic" aria-hidden="true">✦</span><div><b>Insights</b><p>Weekly trends in one email.</p></div></article></div><div class="cw"><article><span class="ic" aria-hidden="true">◆</span><div><b>Exports</b><p>CSV, PDF and Sheets.</p></div></article></div></div></section>
Set container-type: inline-size on the element whose width should be measured, usually the component's wrapper or slot. Then @container (min-width: 300px) rules apply to its descendants.
A container cannot query itself
Rules inside @container style the container's children, not the container. Put the container on a wrapper around the element you want to change.
Units that follow the container
cqi, cqw and friends are percentages of the container's size. clamp(18px, 8cqi, 40px) gives type that scales with the component, within limits.
Name containers when they nest
Queries match the nearest container. Give a specific ancestor a name with container-name (or the container shorthand) and query it by name to skip the ones in between.
Frequently asked questions
Are container queries supported?
Size queries and container units work in all current browsers. Style queries work in Chromium and Safari.
Do they replace media queries?
For components, mostly. Media queries are still right for page-level choices and user preferences like reduced motion.
Can I query height?
Yes, with container-type: size, but the container then needs an explicit height.