CSS Container Queries: The Feature That Changes How You Think About Responsive Design

Media queries check the viewport width. Container queries check the parent element's width. That sounds like a small difference. It isn't.

The problem media queries can't solve

Imagine a card component. In the main content area, it's wide and shows a horizontal layout. In a sidebar, the same card is narrow and needs a vertical layout. With media queries, you're forced to write breakpoints based on viewport width — which means the card component needs to know where it'll be placed. That's a coupling problem.

Container queries solve this. The card says: 'When my container is wider than 400px, show horizontal layout.' It doesn't care about the viewport. Put it in a sidebar, it goes vertical. Put it in a main column, it goes horizontal. Same component, zero changes.

Basic syntax

First, define a containment context on the parent: `.card-wrapper { container-type: inline-size; }`. Then write the query on the child: `@container (min-width: 400px) { .card { flex-direction: row; } }`. That's it.

Browser support in 2025

Container queries now have over 90% global browser support. Chrome, Firefox, Safari, and Edge all support them. The days of waiting for cross-browser support are over. You can ship container queries in production today without polyfills.

When to use container queries vs media queries

• Use container queries for component-level layout decisions (the card example above)
• Use media queries for page-level layout decisions (changing from 1 to 2 to 3 columns)
• Use media queries for things unrelated to width (prefers-reduced-motion, prefers-color-scheme)
• In design systems and component libraries, container queries should be your default