Container Queries

Media queries respond to the viewport — but a card in a sidebar and the same card in a wide main area need different layouts at the same viewport width. Container queries solve this: components respond to their own container's size. This is one of the biggest recent additions to CSS.

The problem with viewport-only responsiveness

A media query knows the screen width, not where your component lives. The same component might be 250px wide in a sidebar or 800px wide in the main column on the same screen. Media queries cannot tell them apart; container queries can.

Setting up a container

First declare an element as a query container with <code>container-type: inline-size</code> (size based on width). Then write <code>@container</code> rules that apply when that container reaches a size — exactly like a media query, but scoped to the container.

.card-wrap {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card { display: flex; gap: 16px; }
}

A responsive component

Here a card stacks when its container is narrow and goes side-by-side when wide — regardless of the viewport. Drop the same component anywhere and it adapts to the space it is given.

<div class="wrap"><div class="card"><div class="thumb">IMG</div><div class="body"><b>Title</b><p>Adapts to its container.</p></div></div></div>

.wrap{container-type:inline-size;max-width:520px}
.card{display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:12px}
.thumb{background:#2563eb;color:#fff;padding:24px;border-radius:8px;text-align:center}
@container (min-width:380px){.card{flex-direction:row}}

Container units

Container queries bring units too: <code>cqw</code> (1% of container width) and <code>cqi</code> (inline size). They let type and spacing scale relative to the component, not the screen.

/* no container declared */
@container (min-width:400px){ … }

.wrap { container-type: inline-size; }
@container (min-width:400px){ … }