Toolgeist › Design

CSS Container Query Playground — See Component-Level Responsive Design

Resize an individual container (not the browser viewport) and watch a component styled with CSS container queries respond to its own container's size — the feature that finally lets a component look right regardless of where it is placed in a layout, instead of only being able to respond to overall viewport width like traditional media queries.

How to use Container Query Lab

  1. Resize the container using the interactive handle.
  2. Watch the component's styling respond via container queries.
  3. View the underlying @container CSS.
  4. Try different container-query breakpoints.

Frequently asked questions

How is a container query different from a media query?
A media query only responds to the browser viewport size; a container query responds to the size of its actual containing element, so the same component can correctly adapt whether it sits in a wide main area or a narrow sidebar.
Do container queries work in all current browsers?
Support is broad across current major browsers as of recent versions — check current compatibility for your specific target browser support requirements.
What is a good use case for container queries?
A card component that needs to look different in a 3-column grid versus a narrow sidebar — exactly the kind of context-dependent styling media queries could never handle well.

Related Design tools

Also searched for: css container query demo interactive · container queries vs media queries · @container css playground online

Browse all 738 free tools on Toolgeist →