CSS container queries and traditional breakpoints both enable responsive design, but they operate at different levels. Traditional breakpoints use viewport width to adjust styles globally, while container queries apply styles based on the size of a specific container. This allows for more modular and context-aware designs.

Key Differences Between Container Queries and Breakpoints

1
Traditional breakpoints depend on the viewport size, affecting the entire page layout.
2
Container queries depend on the size of a parent container, allowing components to adapt independently.
3
Container queries make components reusable across different layouts without redefining media queries.
4
Breakpoints are ideal for page-level layout adjustments, while container queries excel at component-level responsiveness.

Example: Container Query vs Media Query

In this example, the media query adjusts styles when the viewport reaches 768px, while the container query changes the layout when the container itself is at least 500px wide — making the design more modular and adaptive to different contexts.

Difficulty: 6/10

Topics: container queries, responsive design, component isolation

Scenario Questions

0-2 years experience

1
You’re building a card component that should show a larger image when it’s wider than 300px — how would you use container queries to make that work, and what happens if you forget to set container-type: inline-size?
2
If you have two identical card components side-by-side in a grid, and one is narrower than the other, how would container queries make them behave differently compared to using window media queries?

2-5 years experience

1
A team member says the card component breaks when placed inside a modal — the container query doesn’t trigger. What’s the most likely cause, and how would you debug it?
2
You’re building a dashboard with reusable widgets. Some widgets are placed in sidebars (narrow) and others in main content (wide). Why might media queries make this hard, and how would container queries improve the architecture?

5-8 years experience

1
You’re designing a component library for a design system. How would you structure container queries to ensure components behave predictably across different layouts without requiring parent-specific CSS overrides?
2
A performance audit shows layout thrashing when container queries trigger frequently in a dynamic list. What optimizations would you consider, and when would you fall back to media queries instead?

8+ years experience

1
You’re migrating a legacy UI built with media-query-driven components to a container-query-based system. How would you prioritize which components to refactor first, and how do you handle teams still relying on viewport-based breakpoints?
2
Your company supports a multi-product platform where components are reused across web, mobile web, and embedded widgets. How would you architect the responsive strategy using container queries to balance consistency, performance, and cross-team ownership?

Follow-up Questions

❓Can you give an example where container queries prevented a layout bug you’d seen with media queries?
❓What happens if a container has no explicit width set?
❓How do you handle browser support when using container queries in a production app?