Container Queries

Component-driven responsiveness using container size instead of viewport.

container-queriesresponsive

Learning checklist

Definition

Component-driven responsiveness using container size instead of viewport.

Syntax

@container rules

Example

Use the visualizer below to apply these properties and see the result live.

Deep dive

Why this matters

Principles, mental models, and debugging clues tailored to the topic.

Each property is paired with motion or color feedback so you build muscle memory, not just recall syntax.

Controls emit exact CSS you can copy. Use it as a starter token or paste into DevTools for instant validation.

Learn where reflow, repaint, or compositing occurs so you avoid jank and choose GPU-friendly paths.

Focus-visible, reduced-motion, and contrast tips are woven into every lab to keep experiences inclusive.

Practice

Try recreating a UI card using this topic. Toggle between dark and light modes to validate token contrast and responsiveness.

Tip: use DevTools overlays (grid/flex) plus the copy CSS button.

Interactive Lab

Simulate a component that changes style based on its container width.

Container query: min-width 320px

Try these

Min container width320px

Resize me via the range; above 320px, apply the container query style.

Container queries react to parent size, not viewport. Use container-type and @container rules.

CSS

.card {
  container-type: inline-size;
}
@container (min-width: 320px) {
  .card { background: #fbbf24; }
}

HTML

<div class="card">Resize parent; above 320px, container query applies.</div>