Container Queries: Component-Based Responsive Bounds
- Last updated
- Prerequisites:
- Responsive design with media queries
- CSS layout basics (flexbox/grid)
- css
- container-queries
- responsive
- media-queries
- components
- cqw
Read at your depth
The practical view
Container queries let components respond to their parent container's size instead of the viewport. Declare a container: .card { container-type: inline-size; } then query it: @container (min-width: 400px) { .card__title { font-size: 1.5rem; } }. Container query units (cqw, cqh, cqi, cqb, cqmin, cqmax) are percentages of the container's size. This is the component-ized way to do responsive: a card component adapts whether it is in a sidebar (narrow) or a hero (wide), without page-level media queries.
The same idea in other frameworks
CSS modules/Tailwind v4 container queries let React components self-adapt without viewport context in props.Angular components can encapsulate container queries in their own styles, making responsive behavior truly component-scoped.SFC scoped styles support @container natively, so Vue components respond to their mount container.Svelte components with scoped CSS can define their own container contexts for self-contained responsive behavior.Legacy vs modern
Viewport media queries vs container queries for a reusable card
Media queries respond to the whole screen, so the same card misbehaves in narrow containers; container queries make the card adapt to its own space.
@media (min-width: 700px) { .card { flex-direction: row; } } /* ❌ OLD: keyed to viewport, not the card's container */.card-wrap { container-type: inline-size; }
@container (min-width: 400px) { .card { flex-direction: row; } } /* ✅ NEW */Interview gotchas
Context
Interviewers want the mechanism behind container queries — that they require containment to avoid circular sizing, not just a new media-query syntax.
The mechanical answer
Container queries measure a container's size to style descendants, which creates a circular dependency risk: the descendants' styles could change the container's size, which changes the query result. To break the cycle, container-type applies size containment to the chosen axis: the container's inline size is computed without considering its contents, so query results cannot feed back into sizing. container-type: inline-size also implies layout and style containment. Forgetting container-type means no containment context exists and @container queries never match. This is also why you cannot size the container itself with percentage-based children that depend on the query — the containment makes such cycles well-defined.
Trap
The naive answer is 'just add @container and it works'. Without container-type on an ancestor, the query has no context and silently does nothing. Another trap: thinking container-type only adds a capability — it changes layout semantics (containment), which can surprise people who relied on the container growing with its content. Candidates who explain the containment rationale show real understanding.
Context
This probes practical knowledge of the unit system — interviewers want to know the resolution context of each unit and the pitfalls of mixing them.
The mechanical answer
Viewport units resolve against the viewport (vw = 1% of viewport width); container query units resolve against the nearest query container. cqi is 1% of the container's inline size (width in horizontal writing mode), cqb is 1% of the block size, cqw/cqh are 1% of width/height respectively, and cqmin/cqmax take the smaller/larger of the two. These are correct for sizing typography, spacing, and internal layout relative to the component's own space — making components scale proportionally wherever they render. Mixing vw units inside a container-query component ties part of the design to the viewport, recreating the exact coupling container queries are meant to remove.
Trap
The naive answer is 'cqw is just vw for containers'. They resolve against different boxes and behave differently under scrollbars, transforms, and nested containers (units resolve against the nearest container). Another trap: using container units on the container itself or its ancestors — units need a query container ancestor, otherwise they fall back to the small viewport size in some implementations. Candidates who can explain cqi vs cqb and the nearest-container resolution show real mastery.