CSS Container Queries Changed Everything

The Viewport Problem

Media queries work great for page-level layout, but they break down inside reusable components. A card component in a sidebar needs different styles than the same card in a full-width grid — and the viewport width tells you nothing about that context.

Enter Container Queries

With container queries, a component can query the size of its parent container instead of the viewport. Define a containment context on the parent, then write @container rules that respond to that specific element's dimensions.

Real-World Patterns

Navigation bars that collapse their items based on available space. Card grids that switch from horizontal to vertical layout depending on the column width. Sidebar widgets that gracefully adapt when the sidebar is resized. These patterns were painful with media queries but trivial with container queries.

Browser Support in 2026

All modern browsers now support container queries, including size queries, style queries, and the container shorthand. The days of polyfills and feature detection are behind us. It is safe to use container queries in production today.