CSS Container Queries
A CSS feature that styles elements based on the size of their parent container rather than the browser viewport.
Definition
CSS Container Queries allow developers to apply styles to elements based on the dimensions of their containing element rather than the overall browser viewport. This solves a long-standing limitation of media queries, which only respond to the viewport size and cannot adapt components based on the space they actually occupy.
With container queries, a card component can rearrange its layout when placed in a narrow sidebar versus a wide main content area, without any JavaScript and without knowing which context it appears in. This makes truly reusable, context-aware components possible.
Why It Matters
Modern web development relies on reusable components that appear in different contexts across a site. Before container queries, developers had to write viewport-based breakpoints that assumed specific page layouts, making components brittle and tightly coupled to their surroundings.
Container queries enable genuine component-level responsiveness, dramatically simplifying design systems and reducing the CSS complexity of sites with multiple layout contexts like dashboards, content management interfaces, and marketing sites.
Examples in Practice
A product card component automatically switches from a horizontal layout to a vertical stack when placed in a sidebar that is narrower than 300 pixels, using a single container query rather than viewport-based media queries.
A design system team builds a stats widget that shows four metrics in a row when given ample space but reorganizes into a two-by-two grid in smaller containers, all without JavaScript and without knowledge of which page template is hosting it.