Container Queries vs Media Queries
When to reach for CSS container queries instead of media queries, how they differ, and how to test component-level responsiveness reliably.
8 min read - Updated 2026-06-15
Use this guide as a compact release reference, then validate the same breakpoints in Sizzy with synchronized devices and screenshot evidence.
Media queries react to the viewport, container queries react to the component
A media query asks 'how wide is the screen?' A container query asks 'how wide is the box this component lives in?' That difference is huge for reusable components. A card that sits full-width on mobile but in a narrow sidebar on desktop should adapt to its container, not the viewport - and only container queries can express that cleanly.
Media queries: global, viewport-based, great for page layout
Container queries: local, parent-based, great for components
A component can be wide on a narrow screen and narrow on a wide one
Container queries make truly portable components possible
How to use container queries
You declare a containment context on the parent with container-type, then write @container rules that target the child. Browser support is now broad across modern Chromium, Firefox, and Safari, so they are production-ready for most audiences. Keep a media-query fallback only if you must support very old browsers.
Set container-type: inline-size on the parent element
Optionally name containers with container-name for clarity
Write @container (min-width: 400px) rules for the child
Combine with media queries for page-level structure
Test components in multiple contexts at once
Container-query bugs show up when the same component is dropped into different-width slots. The fastest way to catch them is to view your component in several layouts simultaneously. Sizzy lets you open multiple devices and routes side by side, so you can confirm a card behaves correctly in a grid, a sidebar, and a full-width hero in one glance.
Render the component in narrow, medium, and wide containers
Check the same component across phone, tablet, and desktop layouts
Verify container thresholds independently of the viewport
Use synced scrolling to compare instances on one screen
Release checklist
Use container queries for reusable components, media queries for layout.
Confirm container-type is set on the correct parent.
Test the component in every container width it will occupy.
Provide a fallback only if legacy browser support is required.
Frequently asked questions
Are container queries widely supported?
Yes. Container queries are supported in all current versions of Chrome, Edge, Firefox, and Safari. For the vast majority of audiences they are safe to use in production today, with media-query fallbacks only needed for very old browsers.
Should I replace all media queries with container queries?
No. Media queries are still the right tool for page-level layout that depends on the viewport. Container queries shine for components that must adapt to whatever slot they are placed in. Most projects use both together.
What is container-type: inline-size?
It tells the browser to track the inline (usually horizontal) size of an element so its children can respond with @container rules. It is the most common containment mode because most responsive behavior depends on available width.
Related guides
Benji
Your life OS
The companion app that keeps every area of your world in sync.
Zero to Shipped
Ship products, not side projects
The ultimate Next.js boilerplate for building and launching real products.
DMX
Mindful Twitter/X
The intentional X client for macOS. Reclaim your attention span.
Sotto
Voice-to-text for macOS
Speak naturally. Type instantly. 100% local & private.
Passlock
Password manager with willpower
Lock passwords with time delays, word challenges, or hand the keys to someone you trust.
Glink
Changelogs that slap
Beautiful changelogs and roadmaps for your product.
JoinRepo
GitHub access control
Monetize your GitHub repositories with ease.
Tubely
YouTube Studio for Mac
Manage multiple YouTube channels in one native app.
JustWrite
Distraction-free writing
A minimal writing app that helps you focus on what matters.