Skip to content
COSMODEV

Container Queries, Visually Explained

Media queries adapt a component to the page; container queries adapt it to the box it actually lives in — and container units (cqw, cqi) make the adaptation fluid with no breakpoints at all. See who watches whom, and why components become portable.

Animated diagrams · 2 flows

Compare all 2

Sort by any column to find the right fit. Click a name to open its details.

The Unit Is the StrategyUnit → what 1% meansYes — fluid as the container resizesPure CSS mathSame containment contextJust new unitsFluid type and spacing inside components
Who Is Watching WhomCondition → which box it measuresYes — responds as the container resizesBrowser-native, no JSCSS containmentOne container-type lineReusable cards, widgets, design systems