New CSS container queries simplify responsive layouts

11 November 2026

Classic media queries have long been the go-to for responsive web design, adapting layouts to fit different viewport sizes. But as layouts and components grew more complex, the reality became harder. A component's space depends less on the full viewport and more on its specific container. Trying to duplicate viewport-based media queries for every combination of containers turns even small responsive components into a mess of layout-specific CSS branching. And that means missed design opportunities.

The container queries feature arrives just in time. Styling a component based on its parent element—rather than the full viewport—opens new possibilities. Container queries target the containing element, checking for container variables set in CSS. The rules apply if those variables meet a developer-defined condition. Think of how a logo or row structure changes when a modal is resized. CSS container queries work similarly to media queries, but within their containing elements.

Container queries use the @container at-rule, along with the container-type property. For size-based container queries, container-type is set to size, inline-size, or normal. Setting it to inline-size makes the query depend on the container's inline dimensions, while size includes the block dimensions.

The syntax for a size-based container query is: @container (min-width: ...) or @container (min-block-size: ...).

Here's a simple example from MDN:

<div>
  <div class="container">
    <div class="card">
      /* title adjusts size based on card size */
      <h2>Checkout</h2>
      <!-- and so on -->
    </div>
  </div>
</div>

:root {
  --card-priority: 1;
}

.container {
  container-type: inline-size; /* size or normal */
  /* other styles */
}

.card {
  /* normal styles */
  display: block;
}

.card h2 {
    size: var(--card-size, min(1em, (100vw - 2rem * 2)));
}

/* container size query */
@container (inline-size > 700px) {
  .card {
      --card-priority: 3;
  }
  .card h2 {
    /* larger text for wider containers */
    font-size: 200%;
  }
}

In this example, the container query applies styles based on the card's width rather than the viewport. If the card exceeds 700px in width, the header font size increases to 200%.

Container queries help CSS handle components independently. Thinking in components rather than viewports offers several advantages: reusable components with flexible styles, efficient code, and better handling of complex layouts where container sizes vary.

Most importantly, developers can focus less on writing responsive CSS and more on building interactive experiences. Container queries simplify responsive design by handling the details. They're not just another feature—they represent a shift toward component-driven design.

Mozilla's container-query guide demonstrates a reusable card example. As the container's width increases, the card expands, and the title grows larger when the container exceeds 700px.

The feature includes container-style queries, container-size queries, and scroll-state queries. These are part of the CSS Containment project, which optimizes CSS property effects. Container-relative units like cqw and cqh use 1% of the parent's dimensions, simplifying proportional designs. This allows components to be built once and reused across applications.

Container queries are a major advancement, offering component-driven responsive design that streamlines development. As browsers evolve, elements take more control over their presentation. It's a significant shift, and CSS container queries will be a valuable tool for web developers.