CSS Container Queries: The Layout Revolution
Container queries let components adapt to their container's size instead of the viewport. Here's how to use them in production today.
The Viewport Problem
Media queries respond to the viewport width. But components don't live in the viewport — they live in containers of varying sizes.
A sidebar card needs different styles than the same card in a main content area. Media queries can't distinguish between these contexts.
Enter Container Queries
Now the card layout adapts to its container, not the viewport.
Real-World Use Cases
- Dashboard widgets — same component renders differently in 1-column vs 3-column grids
- Product cards — horizontal in wide containers, vertical in narrow ones
- Navigation — inline links collapse to a dropdown in narrow sidebars
Container Query Units
New units relative to the container: cqi, cqb, cqmin, cqmax.
Tip
Combine container queries with CSS Grid's auto-fit for truly fluid, container-aware layouts.
Browser Support
Container queries are supported in all modern browsers since 2023. You can use them in production today with zero polyfills.
Written by
Aisha Pateleditor
UX engineer and accessibility advocate. Specializes in design systems, inclusive design, and CSS architecture. Speaker at multiple web conferences.
Comments (1)
Container queries are a game changer for our component library. We no longer need those awkward 'variant' props for responsive layouts.
Keep reading
design
Building a Design System with Tailwind CSS v4 and React
Learn how to create a scalable, token-based design system using Tailwind CSS v4's new CSS-first configuration and React component patterns.
design
Accessible Web Forms: A Practical Checklist
A hands-on guide to building forms that work for everyone — covering ARIA patterns, keyboard navigation, error handling, and screen reader testing.