Why Use Container Queries
Media queries are great for page-level layout changes, but they break down when the same component appears in multiple contexts. A card in a sidebar and that same card in a main grid should not depend on the viewport width to decide how to render. Container queries solve that by tying breakpoints to the parent container instead of the screen.
Step-by-step guide
Start by selecting a sample component and setting a container type on its parent. Toggle the
container width with the editor, then add container-type, container-name,
and cqw/cqh rules until the layout behaves correctly in each context.
Copy the generated CSS into your codebase once the preview matches your design system requirements.
All preview logic runs locally in the browser. No sign-up, no server-side rendering, and no upload of your markup or styles required.
When to choose container queries instead of media queries
Keep media queries for page shell changes, theme switches, and user-preference media features like
prefers-color-scheme. Use container queries for reusable components that need to
adapt to narrow sidebars, wide grids, modals, and dashboard panels without duplicating class variants.
Container query naming and scoping tips
Use container-name whenever a component sits near sibling containers that could
accidentally match the same rule. Named containers make inspection and maintenance easier,
especially in large design systems where a single layout refactor can move components between
nested parents.