What Are CSS Container Queries and How Do They Differ from Media Queries?
Learn how CSS container queries let components respond to their own container size instead of the viewport, with examples.
Expected Interview Answer
Container queries let an element style itself based on the size of its nearest containing ancestor rather than the size of the entire viewport, using `container-type`/`container-name` on the ancestor and `@container` rules on the descendant, which makes truly reusable, context-aware components possible.
Media queries only ever answer “how big is the browser viewport,” so a card component styled with a media query behaves identically whether it sits in a wide main column or a narrow sidebar — it has no awareness of its actual available space. Container queries fix this by letting you opt an ancestor element into being a “query container” via `container-type: inline-size` (or `size`), optionally naming it with `container-name`, and then writing `@container (min-width: 400px) { ... }` rules that apply based on that specific container's width, not the viewport's. This means the exact same component can be dropped into a wide layout or a cramped sidebar and automatically adapt its own internal layout to the space it is actually given, which is the missing piece that made component libraries previously rely on JavaScript-based resize observers to achieve the same effect. Container queries also introduce container query length units (`cqw`, `cqh`, `cqi`, `cqb`) that scale relative to the container's size rather than the viewport's.
- Components adapt to their actual available space, not just viewport width
- Enables truly reusable components that work correctly in any layout context
- Replaces many JavaScript ResizeObserver-based layout hacks with pure CSS
- Container query units (cqw/cqh) scale relative to the container, not the viewport
AI Mentor Explanation
A media query is like a groundstaff crew that only ever checks the size of the entire stadium before deciding how to set up equipment, even for a small practice net tucked in one corner. A container query is like the crew instead measuring the actual practice net's own dimensions and setting up gear sized specifically for that net, regardless of how big the surrounding stadium is. The same equipment kit dropped into a full ground or a tiny net configures itself correctly either way. That measure-the-local-space-not-the-whole-stadium distinction is exactly what separates container queries from media queries.
Step-by-Step Explanation
Step 1
Opt an ancestor into being a container
Set container-type: inline-size (or size) on the wrapping element, optionally naming it with container-name.
Step 2
Write an @container rule
Descendants use @container (min-width: 400px) { ... } instead of @media, scoped to that container.
Step 3
Browser measures the container, not the viewport
The rule activates based on the named container's actual rendered size.
Step 4
Component adapts wherever it is placed
The same component reused in a wide or narrow container automatically gets different styles.
What Interviewer Expects
- Clear articulation of the core difference: viewport size vs ancestor container size
- Knowing container-type must be set on an ancestor before @container works on descendants
- Awareness of container query units (cqw, cqh, cqi, cqb)
- Understanding the real-world payoff: reusable components across differing layout contexts
Common Mistakes
- Confusing container queries with media queries as functionally interchangeable
- Forgetting to set container-type on the ancestor, so @container never matches
- Assuming container queries replace all media query use cases (viewport-level concerns still need media queries)
- Not knowing about cqw/cqh container query length units
Best Answer (HR Friendly)
“Media queries only look at how big the whole browser window is, but container queries let a component check the size of the box it is actually sitting inside. That means the exact same card or widget can automatically look different depending on whether it is placed in a wide main area or squeezed into a narrow sidebar, without any JavaScript.”
Code Example
.card-wrapper {
container-type: inline-size;
container-name: card;
}
.card {
display: flex;
flex-direction: column;
}
@container card (min-width: 400px) {
.card {
flex-direction: row; /* switches to a horizontal layout only when its own container is wide enough */
gap: 1rem;
}
}Follow-up Questions
- Why can't an element be a container for itself in a container query?
- What are container query length units and how do they differ from vw/vh?
- How do container queries interact with the existing cascade and specificity rules?
- When would you still reach for a media query instead of a container query?
MCQ Practice
1. What size does a container query base its rules on?
Container queries respond to the size of an ancestor explicitly marked with container-type.
2. What property must be set on an ancestor before @container rules can target it?
container-type (e.g., inline-size) opts an element in as a query container.
3. Which unit scales relative to a query container's width rather than the viewport?
cqw is a container query length unit representing a percentage of the container's inline size.
Flash Cards
What do container queries measure? — The size of a designated ancestor container, not the viewport.
What property opts an element in as a container? — container-type (e.g., inline-size or size).
Rule syntax for container queries? — @container (min-width: 400px) { ... }
Name a container query length unit. — cqw (container query width), also cqh, cqi, cqb.