Why Your CSS Grid Should Be a Container Query, Not a Media Query

Do I really need container queries, or are media queries enough?

I get it. Media queries have served us well for years. But the web has changed. Mobile devices now account for 52.57% of global website traffic (StatCounter Global Stats), and users expect layouts that adapt not just to the viewport, but to the component's actual space. The old way—writing media queries that respond to the browser width—forces every component to be designed in isolation, unaware of its real container. That's backwards. I believe that if you're building interfaces for the modern web, you should be using CSS container queries for component-level responsiveness, and I'll show you why it's not just a nice-to-have, but a fundamental shift in how we think about responsive design.

The Problem with Media Queries: They're Viewport-Centric

Media queries are a blunt instrument. They ask, "How wide is the viewport?" and then apply styles. But a component doesn't live in the viewport; it lives in a sidebar, a card, or a grid cell. A media query can't know if that sidebar is 300px or 600px wide on a 1440px screen. So you end up writing hacks like @media (max-width: 1024px) to adjust a card that might be cramped even on a large desktop because its container is narrow. This leads to fragile, over-engineered CSS. The solution isn't to add more breakpoints; it's to change the unit of measure entirely.

Container Queries: The Component-First Revolution

Container queries flip the script. Instead of asking the viewport, they ask the container. With @container, you can style a component based on its own width, height, or inline size (MDN Web Docs). This is a breakthrough. It means the same component can adapt whether it's placed in a narrow sidebar or a wide content column—without you writing a single media query. And it's not some experimental feature: container queries are Baseline Widely available, supported in browsers since February 2023 (MDN Web Docs). That's over a year of mainstream support as of now. There's no excuse not to use them.

Real-World Example: A Card That Truly Bends

Let me give you a concrete scenario. You're building a product card. In a three-column grid on a 1440px desktop, each card might be about 400px wide. But in a mobile layout, the same card is 100% of the viewport, say 375px. With a media query, you'd write two sets of styles: one for desktop, one for mobile. But what if you later place that card in a 500px sidebar? Your media query says "mobile" but the card has 500px to breathe—it should look like the desktop version. Container queries fix this by letting the card respond to its own container. You define a container on the parent, and then inside the card, you write @container (min-width: 400px) { ... }. The card adapts based on its actual width. No more guessing. This is the future of responsive design.

Addressing the Counter-Argument: "Media Queries Are Good Enough"

You might argue, "Media queries work fine for most sites; why complicate things?" And honestly, for simple pages with a single layout, media queries are still fine. But the moment you have reusable components—which you should—media queries create a maintenance nightmare. You end up duplicating styles or writing verbose overrides. Container queries are not harder; they're more logical. They encapsulate component styles, making your CSS more modular and easier to maintain. Plus, they integrate beautifully with modern CSS features like :has() and subgrid, which are also Baseline Widely available (MDN Web Docs). The learning curve is minimal, and the payoff is huge. So no, media queries aren't good enough for component-driven design.

Practical Advice: How to Start Using Container Queries Today

Start small. Pick a component that gives you trouble—a card, a nav, a form. Wrap it in a container using container-type: inline-size. Then replace your viewport-based media queries with @container queries. Use container query length units like cqw (1% of container width) and cqi (1% of inline size) to size typography and spacing relative to the container (MDN Web Docs). For example, set font-size: clamp(1rem, 2.5cqi, 1.5rem) for fluid type that scales with its container, not the viewport. Be sure to test on real devices and use the browser's device emulation to simulate various container widths.

Sources

• MDN Web Docs (@container) - https://developer.mozilla.org/en-US/docs/Web/CSS/@container
• MDN Web Docs (container queries guide) - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries
• StatCounter Global Stats - https://gs.statcounter.com/platform-market-share/desktop-mobile-tablet