Container query

A container query applies styles based on the size of a parent container rather than the size of the whole viewport. It lets a component adapt to the space it actually sits in, so the same card looks right in a wide main column and in a narrow sidebar. It is the piece responsive design was missing for true component-based layouts.

How a container query works

You mark an element as a query container, then write rules against its width.

• Declare the container: .card-wrap { container-type: inline-size; }
• Query it: @container (min-width: 400px) { .card { display: flex; } }
• Optionally name it with container-name to target a specific ancestor.

Container query versus media query

Both apply conditional styles, but they measure different things.

Container query units

Alongside the rules, container query units size against the container: cqw (1% of container width), cqh (height), and cqi / cqb (inline and block size). They let type and spacing scale with the component instead of the screen.

Why it matters for design systems

In a component-based system, the same card, list or media object is dropped into many layouts. Media queries cannot know how wide that slot is; container queries can. This makes components truly self-contained and is why design systems adopted them quickly.

Browser support and best practices

Container queries are supported across all modern browsers. Declare the container on a wrapper rather than the component itself so the component stays reusable, and keep viewport media queries for page-level structure while using container queries for the pieces inside.

Container queries at BeBranded

At BeBranded we build components that adapt to their slot with container queries, so a card behaves correctly wherever it lands. It is part of the systematic, component-driven front-end in our design work.