What are CSS container queries and what problem do they solve?

WHAT THIS TESTS: Whether you understand the architectural shift from page-level responsive design to container-level responsive design, and if you can articulate why viewport-based media queries break component reusability in modern design systems.

A GOOD ANSWER COVERS: Four things in order. First, a clear definition that container queries are at-rules using the container dimensions instead of the viewport. Second, the specific problem they solve which is that a reusable component like a card does not know its layout context, so viewport media queries force you to write overrides for every possible page location. Third, the mechanics of creating a containment context with container-type set to size or inline-size so the browser knows which dimensions to track. Fourth, a concrete component example that shows adaptation based on the container width rather than the device width.

COMMON WRONG ANSWERS: Three red flags to avoid. First, saying container queries are just nested media queries or a syntax improvement without explaining the container versus viewport distinction. Second, claiming you can solve the same problem with media queries by adding extra CSS classes per page section, which misses the point of true component encapsulation. Third, forgetting to mention containment context setup and implying container queries work on any parent automatically.

LIKELY FOLLOW-UPS: An interviewer might ask about container query length units like cqw and cqh and how they differ from viewport units. They might ask about the performance implications of containment and how layout containment prevents unwanted reflows from escaping the container. They could also ask about style container queries or scroll-state queries as extensions of the same concept.

ONE CONCRETE EXAMPLE: A product card component that displays a stacked layout with small text in a narrow sidebar, but switches to a horizontal layout with larger typography when placed in a wide main content area. With container queries, the card uses a container-type of inline-size on its wrapper and an at-rule that checks if the container width exceeds 400 pixels to change flex-direction and font-size. The same card component works in both locations without any knowledge of the page structure, which is impossible with viewport media queries because both layouts might exist on the same screen simultaneously.

Source: developer.mozilla.org