@container

@container

@container queries an ancestor instead of the viewport. Declare a container with container: card / inline-size (name and type), then write @container card (width > 360px) { ... }. Size queries are Baseline widely available; style queries such as @container style(--variant: compact) became Baseline 2026 with Firefox 151 555 ; scroll-state queries are Chromium-only. The same card adapts to two containers:

One card component in a narrow and a wide containerHTMLLive

<style>
  body { display: flex; gap: 16px; font: 15px system-ui; margin: 12px; }
  .slot { container: card / inline-size; }
  .card { display: grid; gap: 8px; padding: 8px; background: #e3f2fd; border-radius: 8px; }
  .card i { display: block; aspect-ratio: 3 / 1; background: #1565c0; border-radius: 4px; }
  h3 { margin: 0; font-size: 1rem; }
  @container card (width > 360px) {
    .card { grid-template-columns: 40% 1fr; align-items: center; }
  }
</style>
<div class="slot" style="width:230px"><div class="card"><i></i><h3>Stacked (230px)</h3></div></div>
<div class="slot" style="width:450px"><div class="card"><i></i><h3>Row (450px)</h3></div></div>

Browser output of Listing 4.31 — Browser output of 31

Container units (cqi, cqb) are in Relative Length Units; intrinsic design patterns in Container Queries.

MENU