CSS Container Query Generator

Generate CSS container queries (@container) for component-level responsive design.

Presets:

CSS Length: 419 charsTarget Container: cardBreakpoints Defined: 3

Container Setup

Container name

Container type

Use named container

Breakpoints (min-width)

Breakpoint 1

Breakpoint 2

Breakpoint 3

CSS applied at each breakpoint

These styles are applied inside each @container block.

Generated CSS

CSS Container Query Generator — build @container rules for responsive components

CSS container queries let components respond to the size of their own container rather than the viewport, enabling truly reusable responsive components. The container-type: inline-sizedeclaration on the wrapper enables queries based on the container's inline (horizontal) size. Named containers (container-name) let you target a specific ancestor when multiple containers are nested. Container queries are supported in all modern browsers and are the preferred approach for design systems and component libraries where components are embedded in varying layout contexts.

Built and maintained by Meet Shah · Last updated 28 July 2026

What this tool is used for

Producing container queries so a component adapts to its own width.
Getting the containment declaration right on the parent.
Building a component that works in a sidebar and a main column.
Comparing a container query against a media query for one case.
Producing a starting query set for a design system component.

Frequently Asked Questions

What do container queries solve that media queries cannot?: Component-level responsiveness. A media query knows only the viewport, so a card cannot tell whether it is in a narrow sidebar or a wide main column. `@container` responds to the element's own available width, which is what makes a component reusable across layouts.
Why does the parent need container-type?: Because querying an element's size requires containment — the browser has to be able to size the container without consulting its children, or the query would be circular. `inline-size` contains only the horizontal axis and is what nearly every real case wants.
What is the catch with container-type: size?: It contains both axes, so the container no longer grows to fit its content vertically — height must be set explicitly or the element collapses. That is why `inline-size` is the common choice and `size` is reserved for cases where the height genuinely is fixed.
Why name a container?: So a query can target a specific ancestor rather than the nearest one. Without a name, `@container (min-width: 400px)` matches the closest containment context, which in nested components is often not the one you meant. A name makes the relationship explicit and survives refactoring.
What are container query units?: `cqw`, `cqh`, `cqi` and `cqb` — percentages of the container's width, height, inline and block size. They are the counterpart of `vw`/`vh` scoped to the component, so typography can scale with its container rather than with the window.

Common errors and gotchas

Forgetting `container-type` on the parent, without which no query matches.
Querying the element itself rather than an ancestor, which is not how containment works.
Using `container-type: size` when `inline-size` was meant, which requires a fixed height.
Assuming universal support, when older browsers need a fallback path.
Mixing container and media queries for the same decision, which produces conflicts at boundaries.