CSS Container Query Generator
What a container query does
A media query asks how wide the viewport is. A container query asks how wide the component's own container is, which is the question you actually want answered when the same card appears in a sidebar, a grid and a full-width hero.
Syntax
container-type: inline-size; @container (min-width: <length>) { ... }| Part | What it controls |
|---|---|
| container-type | Declares an element as a query container. inline-size watches width only and is what you want almost every time. |
| container-name | Optional label so a descendant can target a specific ancestor with @container name (min-width: …). |
| @container | The query itself, written like a media query but measured against the nearest matching container. |
| cqw / cqh / cqi | Units relative to the container rather than the viewport, so 50cqi is half the container's inline size. |
| the container cannot query itself | Rules inside @container apply to descendants of the container, never to the container element. |
| style queries | @container style(--theme: dark) responds to a custom property's value rather than a size, which is newer and less widely supported. |
Notes from practice
size containment has a cost
container-type: size makes the element ignore its children's height, which usually collapses the layout. inline-size only contains the width and is the safe default.
Query the wrapper, style the child
The most common mistake is putting container-type and the @container rules on the same element. Wrap the component, make the wrapper the container, and style the component inside the query.
They replace most component breakpoints
A card that works in any column no longer needs viewport breakpoints at all, which removes the whole class of bugs where a component looks right on one page and wrong on another.
CSS Container Query Generator FAQ
What is a CSS container query?
A container query styles an element based on the size of its containing element rather than the viewport. Declare container-type: inline-size on a wrapper, then write @container (min-width: 400px) rules that apply to its descendants.
What is the difference between a container query and a media query?
A media query measures the viewport, so every component on the page responds to the same number. A container query measures the component's own container, so the same card can lay out differently in a narrow sidebar and a wide main column on one screen.
Why is my container query not working?
Usually because container-type is missing, or because the rules target the container itself. A container cannot query its own size — put container-type on a wrapper and apply the @container rules to the elements inside it.
What are cqw and cqi units?
They size things relative to the query container instead of the viewport: 1cqw is one percent of the container's width and 1cqi one percent of its inline size. They let typography and spacing scale with the component rather than the screen.
Are container queries supported in all browsers?
Size container queries are supported in current Chrome, Edge, Firefox and Safari. Style queries, which respond to a custom property's value, are newer and less widely available — check the support table before relying on them.
Related generators
- CSS Grid — Define tracks, gaps, alignment and auto-placement, then make one item span rows and columns.
- Flexbox — Direction, wrapping, alignment and gap, plus per-item grow, align-self and order.
- Aspect Ratio & Object Fit — Hold a box to a ratio, then choose how the image fills it. The dashed frame marks the original edges.
- Typography — Size, spacing, decoration, text-wrap and text-stroke for any text block.
Part of CSSGen.dev — 30 free visual CSS generators with browser support built in.