CSS Container Queries: The Future of Responsive Design

For years, responsive web design meant one thing: CSS breakpoints based on the browser window width. A card component in a wide sidebar would use the same styles as the same card in a narrow column because both lived in the same viewport.

CSS Container Queries change that. Now a component can respond to the size of its own parent container instead of the viewport. This is the most significant shift in CSS responsive design since media queries were introduced.

The Problem with CSS Media Queries

A card component used in both a three column layout and a sidebar looks identical at the same viewport width, even if one has 400px of available space and the other has only 200px. CSS media queries cannot see that difference because they only measure the viewport.

Live Demo: Resize a Container Query Component

The card below is one single component. Drag the right edge to resize its container and watch it snap through three distinct layouts at its own breakpoints, completely independent of the browser viewport width.

Notice the three container query breakpoints: stacked (compact), side by side (≥380px), and wide with larger typography (≥560px). These breakpoints query the container width, not the viewport.

Two Cards in Different Contexts

Here is the real power of CSS Container Queries: place the same card component in a narrow and a wide container simultaneously. Each card independently adapts to its own available space. Drag both handles to see it in action.

CSS Container Query Syntax

Setting up container queries takes two steps: mark a parent element as a containment context, then write @container rules that style descendants based on the container size.

/* Step 1: Define the container */
.card-wrapper {
  container-type: inline-size;
  container-name: card;
}
 
/* Step 2: Write container query rules */
@container card (min-width: 380px) {
  .card { flex-direction: row; }
}
 
@container card (min-width: 560px) {
  .card-title { font-size: 22px; }
}

Why CSS Container Queries Matter

CSS Container Queries Browser Support

CSS Container Queries have reached Baseline status and are supported in all modern browsers including Chrome 105 and later, Firefox 110 and later, and Safari 16 and later. No polyfill is needed for production use in 2026.