Container queries, the CSS feature I was begging for

For years I’ve been building components that have to look good both on their own, taking up the whole screen, and squeezed into a narrow sidebar. Viewport media queries could never fully solve that, because a media query knows nothing about the component — it knows about the browser window’s width, which is a completely different thing.

The age-old problem

A product card might live in a three-column grid on desktop and also, on the same page, inside a three-hundred-pixel sidebar. With @media (min-width: 900px), that card has no way of knowing it’s in the sidebar — it only knows the window is wide, so it applies the same “desktop” style to both, and the one in the sidebar ends up broken, with overflowing text or an image that doesn’t fit.

The usual fix was duplicating the component with a modifier class (.card--sidebar) and laying it out twice by hand, or reaching for JavaScript with a ResizeObserver to simulate what CSS should have solved on its own.

How container queries solve it

With support now settled in every modern browser, container-type: inline-size on the parent turns that element into a query container, and from there @container (min-width: 400px) inside the component reacts to that container’s actual width, not the window’s. The same card, without duplicating a single line, adapts on its own both in the three-column grid and in the narrow sidebar.

What really changes

It’s not just less code — it’s that the component becomes responsible for itself again. Before, knowing how a card would look depended on where you’d placed it on the page; now it depends only on the component itself and the space it has available, which is how it should have always been. I still use viewport media queries for general page-layout decisions, but for any component that’s going to be reused in different places, container queries are now the default choice.