CSS Container Query Tester - Online @container Playground

CSS Container Queries allow you to style elements based on the size of their parent container rather than the viewport. Using the @container at-rule, you can apply styles conditionally when a container meets certain size conditions (like minimum width). This enables truly component-based responsive design—the same component adapts whether it's in a narrow sidebar or a wide main content area.

You need to define a containment context on the parent element using the container-type property. The most common value is container-type: inline-size; which allows querying the container's inline (width) dimension. You can also assign a container-name for targeted queries. Example: .card-wrapper { container-type: inline-size; container-name: cards; } Then use @container cards (min-width: 500px) { ... }.

Media Queries (@media) respond to the viewport (browser window) size—they're page-level. Container Queries (@container) respond to a specific parent element's size—they're component-level. This means a card component can adapt its layout based on its own container's width, regardless of the viewport size. Container queries enable truly reusable, self-contained responsive components.

Container Queries are supported in all modern browsers as of 2023–2024: Chrome 105+, Edge 105+, Safari 16+, Firefox 110+, and Opera 91+. For older browsers, consider providing a fallback using @supports or progressive enhancement approaches. Check caniuse.com for the latest data.

You can use min-width, max-width, min-height, max-height, and logical properties like min-inline-size. Combine conditions with and, or, and not. You can also use container query length units: cqw (1% of container width), cqh (1% of container height), cqi, cqb, cqmin, and cqmax. These work like viewport units but are relative to the container.

Yes! You can assign different container-name values to different elements and target them specifically in your @container rules. For example: @container sidebar (max-width: 300px) { ... } will only match a container named "sidebar". If you omit the name—@container (min-width: 600px) { ... }—it matches the nearest ancestor container of any name.

Common issues: 1) The container element must have container-type set (this playground's container already has container-type: inline-size). 2) Check your selector targets elements inside the container. 3) Ensure your @container syntax is correct—use parentheses around conditions. 4) If using a named container, verify the name matches. Click "Apply CSS" after editing to ensure changes take effect. The status indicator shows green when the style is live.