Drag to resize a live demo container, add real @container breakpoints, and watch the card re-layout instantly. Copy working CSS when you're done.
Panda Card
This card reads the width of its own container, not the viewport, and re-layouts as you resize it.
Build components that adapt anywhere they're dropped, whether that's a wide main column or a narrow sidebar.
Grab the handle or use the width slider to shrink and grow the demo container and watch the card react live.
Add as many @container min-width rules as you need, each with its own direction and font size.
Grab the finished container-type, container-name and @container rules, ready to paste into your stylesheet.
A container query is a way to style an element based on the size of its nearest ancestor container instead of the browser viewport. You opt an element into being a "query container" with container-type: inline-size (sizing along the inline/horizontal axis) and optionally give it a container-name so descendants can target it specifically. Once that's set, any descendant can be styled inside an @container name (min-width: 400px) { ... } block, and the browser re-evaluates those rules whenever the container's own box changes size, regardless of the viewport width. This solves a real limitation of media queries: a card component styled with a media query looks identical whether it's placed in a full-width hero or a 240px sidebar, because a media query only ever sees the viewport. A container query lets that same component genuinely adapt to wherever it's actually placed, which is why container queries have become the standard approach for building truly reusable, self-contained UI components.
Nothing becomes a query container automatically — you must set container-type on an ancestor first.
container-name avoids ambiguity when containers are nested, letting a rule target the right ancestor.
Beyond breakpoints, you can size text and spacing fluidly with container query length units like 1cqw.
A container query lets an element change its styles based on the size of its nearest ancestor container rather than the browser viewport, using the @container at-rule together with container-type set on that ancestor.
A media query only reads the viewport size, so a component looks the same no matter where it sits on the page. A container query reads the size of its containing element, so the same component can adapt differently in a sidebar versus a full-width column.
Yes. container-type: inline-size turns an element into a query container along its inline axis, and an optional container-name lets you target that specific container from @container rules instead of the nearest ancestor container.
Yes. Container queries have been supported in all major browsers, including Chrome, Edge, Firefox and Safari, since 2023, so they are safe to use in most production projects today.
Yes. Besides layout changes like flex-direction, @container rules can adjust any property including font-size, padding or grid-template-columns, and container query length units such as cqw are also available.
Keep building with these free online CSS tools.