For 15 years, we have conditioned ourselves to think in terms of “Mobile”, “Tablet”, and “Desktop”. We write @media (max-width: 768px). But components don’t care about the screen width. They care about their container.
The Problem
Imagine a “Product Card” component.
- On the homepage, it’s in a sidebar (narrow).
- On the search page, it’s in a main grid (wide).
With Media Queries, you have to write complex overrides. “If mobile, allow full width. If desktop AND sidebar, allow full width.” It’s a mess.
The Solution: @container
All we have to do is mark the parent as a container:
.card-wrapper {
container-type: inline-size;
}Now, the card can query its own environment:
@container (min-width: 400px) {
.card {
display: flex;
flex-direction: row;
}
}Browser Support in 2025
It’s green across the board. Chrome, Edge, Safari, and Firefox all support it. There is zero reason to use Media Queries for component-level layouts anymore.
My “Hybrid” Strategy
I still use Media Queries for Page Layout (grid columns, hiding the sidebar). But for everything inside the grid cells? It’s 100% Container Queries. My CSS has shrunk by 30% because I don’t need context-specific modifiers.