Design With Container Queries

Layout & Responsive · responsive, components, design systems

Updated 2026-07-28

Let components respond to the space they are given, not to the size of the window. A card in a narrow sidebar and the same card in a wide main column are the same width problem at two different screen sizes.
Specify components by their own widths. "Below 320 pixels the media stacks above the text" is a reusable rule, while "on mobile it stacks" is only true in one layout.
Define the layout changes a component is allowed to make, and keep them few:

Do not let every component invent its own thresholds. A shared set of size names keeps a page from changing shape at a dozen unrelated points.
Keep type readable when a component gets narrow. Shrinking text to avoid wrapping produces a card nobody can read in a column nobody wanted.
Remember that page-level concerns still belong to the viewport. Navigation patterns, safe areas, and input method are properties of the device, not of a box.
Test each component in isolation at its full width range before you place it. Most container bugs are found in the component gallery, not on the page.

Components that know their own size can be placed anywhere, which is the difference between a design system and a collection of page layouts.