CSS Container Queries Table
| Piece | What it does | Field note |
|---|---|---|
container-type: inline-size | Declares a query container | The element becomes a size-container for inline axis |
@container (min-width: 400px) | Queries the container width | Styles children based on CONTAINER, not viewport |
@container card (min-width: 400px) | Named container query | Named containers allow multiple independent queries |
container-name: sidebar | Names the container | Children can target a specific container by name |
cqw / cqh / cqi | Container query units | 1cqi = 1% of container inline size - fluid typography inside cards |
@container style(--theme: dark) | Style query (experimental) | Queries CSS variable values - limited browser support |
Container queries are the biggest CSS layout shift since flexbox: styles respond to the CONTAINER'S width instead of the viewport. A card component with container queries adapts to wherever it's placed - sidebar, main column or full-width - without media-query guesswork. The table below is the working six.
Bottom line: the mental model shift is one word. Media queries ask 'how wide is the SCREEN?', container queries ask 'how wide is my PARENT?'. The component owns its responsive behaviour instead of the page owning it - which means the same component works everywhere without the page knowing about its internals.
The honest part: container queries need two pieces working together. The PARENT declares container-type: inline-size (becoming a query container), and the CHILD uses @container (min-width: 400px) to respond. Without the parent's declaration, the @container block is ignored - the two-piece contract is the first thing to check when container queries don't fire.
How to use
- Declare the parent: container-type: inline-size turns any element into a size-container for its children.
- Query from the child: @container (min-width: 400px) { ... } applies styles based on the container's inline size.
- Use cqw/cqh/cqi units for fluid sizing INSIDE the container - 1cqi = 1% of the container's inline size, independent of viewport.
Frequently asked questions
What is the difference between container queries and media queries?
Media queries respond to the VIEWPORT; container queries respond to the nearest ancestor with container-type set. The practical difference: a card with container queries adapts to its column (sidebar = narrow, main = wide) without the page knowing about the card's internals. Media queries can only see the screen width, so the same card needs page-level coordination. Container queries make components truly reusable - the component owns its responsive behaviour.
What does container-type: inline-size actually do?
It turns the element into a query container AND applies style containment (the element's size cannot depend on its contents in the inline axis). This prevents circular dependencies: if the child's styles could change the container's size, the query would loop forever. The trade-off: the container's inline size must come from outside (grid column, parent width), which is exactly the design constraint container queries solve for.
When should I use cqw units instead of percentages?
cqw (container query width) is 1% of the CONTAINER's inline size; % is 1% of the parent's relevant dimension (which might be height for some properties). Use cqw for font-size and spacing INSIDE a container-query component - the text scales with the container regardless of viewport. The typical pattern: font-size: 4cqi makes the heading scale from compact (sidebar) to large (full-width) as the container changes.
Are style queries different from size queries?
Yes. Size queries (@container (min-width: 400px)) test the container's inline size and are fully supported. Style queries (@container style(--theme: dark)) test the container's CSS custom property VALUES and have limited support (Chrome only as of 2024). Style queries enable theme-reactive components - a card that changes layout when the page theme changes - but browser support means they should be progressive enhancement, not the primary layout mechanism.