CSS Container Query Builder

A CSS container query lets you apply styles to an element based on the size of its parent container rather than the viewport. This makes truly reusable, component-level responsive design possible — a card component can adapt its layout whether it's placed in a narrow sidebar or a wide main column, without any extra JavaScript or media query hacks.

The container-type property establishes an element as a query container. 'inline-size' (most common) enables queries on the inline axis (width in horizontal writing modes). 'size' enables queries on both inline and block axes (width and height), but requires the container to have a definite height. 'style' enables style-based queries (CSS custom property values). For most use cases, inline-size is the right choice.

Use container-name when you have nested containers and need to target a specific ancestor. Without a name, @container queries match the nearest ancestor that is a query container. Naming lets you write '@container sidebar (min-width: 400px)' to always query the sidebar container specifically, regardless of nesting depth.

Media queries respond to the viewport (browser window) size. Container queries respond to the containing element's size. This is a fundamental shift: with media queries, a responsive card must know where it will be placed. With container queries, the card adapts to its own available space automatically, making components truly portable and reusable across any layout.

Container queries are supported in all modern browsers: Chrome/Edge 105+ (August 2022), Firefox 110+ (February 2023), and Safari 16+ (September 2022). Global browser support is above 93% as of 2024. For progressive enhancement, wrap your container query CSS in '@supports (container-type: inline-size) { ... }' to ensure older browsers simply ignore the block.