CSS Container Queries: Responsive Components Without Media Queries
Learn CSS container queries — the long-awaited feature that makes components responsive to their container size rather than the viewport. Covers syntax, browser support, and migration from media queries.
Key Takeaways
- Media queries respond to the viewport width.
- @container card (min-width: 400px) {
- New units relative to the container's dimensions:
- Container queries are supported in all modern browsers (Chrome 105+, Firefox 110+, Safari 16+).
- Start with components that appear in multiple contexts — cards, navigation items, form fields.
Media Query Generator
Generate responsive CSS media queries with device presets
The Media Query Limitation
Media queries respond to the viewport width. But a card component placed in a narrow sidebar needs a different layout than the same card in a wide main area — both at the same viewport width. Container queries solve this by letting components respond to their parent's size.
Basic Syntax
.card-container {
container-type: inline-size;
container-name: card;
}
@container card (min-width: 400px) {
.card { flex-direction: row; }
}
@container card (max-width: 399px) {
.card { flex-direction: column; }
}
Container Query Units
New units relative to the container's dimensions:
| Unit | Relative To |
|---|---|
cqw |
1% of container width |
cqh |
1% of container height |
cqi |
1% of container inline size |
cqb |
1% of container block size |
cqmin |
Smaller of cqi/cqb |
cqmax |
Larger of cqi/cqb |
Browser Support
Container queries are supported in all modern browsers (Chrome 105+, Firefox 110+, Safari 16+). For older browsers, use media queries as a fallback — the layout will be viewport-responsive instead of container-responsive.
Migration Strategy
Start with components that appear in multiple contexts — cards, navigation items, form fields. Add container-type: inline-size to their parent wrappers and convert their media queries to container queries. Components in single contexts can remain on media queries.
Generate container query CSS with the Peasy responsive CSS tool.