Container query builder
Build CSS container query code visually: pick the container type (inline-size, size or scroll-state), name the container, set min-width, max-width or range conditions with their inner styles, and get the container-type declaration plus @container rules and a fallback.
Runs in your browserEvery computation happens in your browser — your data never leaves this device.
Presets
Container settings
container-type decides which dimensions can be queried: inline-size for width only, size for both axes, scroll-state for scroll state
Breakpoints and inner styles
Each breakpoint becomes one @container rule; one declaration per line, duplicate properties are rejected
Live preview
The preview resolves which breakpoints match the current container width and merges their declarations in cascade order (scroll-state breakpoints are not simulated)
Matched breakpoints：1
Generated CSS
.card {
container-type: inline-size;
container-name: card;
}
@container card (min-width: 480px) {
.card__title {
font-size: 20px;
}
}
@container card (min-width: 768px) {
.card__title {
font-size: 24px;
line-height: 1.2;
}
}Fallback
Browsers without container-type fall back to the base styles via @supports not (...) — the first breakpoint is used
@supports not (container-type: inline-size) {
.card__title {
font-size: 20px;
}
}What this tool does
- Build genuinely responsive components: cards, nav bars and sidebars react to their own container width instead of the viewport, so the same component works in a narrow column and a wide one.
- Skip memorising the @container syntax — pick the container type, name and breakpoints and copy the container-type declaration plus the @container blocks.
- Port a component library from media queries to container queries and use the width slider to confirm which breakpoints match.
- For sticky headers, use a scroll-state query to add a shadow or border once the element sticks, with no scroll listener in JavaScript.
Example
Input
Container .card named card with container-type inline-size, inner element .card__title; breakpoint 1: (min-width: 480px) → font-size: 20px; breakpoint 2: (min-width: 768px) → font-size: 24px; line-height: 1.2
Output
.card {
container-type: inline-size;
container-name: card;
}
@container card (min-width: 480px) {
.card__title {
font-size: 20px;
}
}
@container card (min-width: 768px) {
.card__title {
font-size: 24px;
line-height: 1.2;
}
}The fallback block reuses the first breakpoint: @supports not (container-type: inline-size) { .card__title { font-size: 20px; } }.
Frequently asked questions
How do container queries differ from media queries?
A media query looks at the viewport; a container query looks at the size of the nearest container ancestor. The same card component in a 300px sidebar and an 800px main column can only get one style from a media query, but container queries let each instance adapt — that is what makes components truly responsive.
inline-size or size?
inline-size restricts queries to the inline axis (width, in horizontal writing modes) and has the least layout impact, so it fits almost every case. size also allows height queries but applies size containment on both axes, meaning the element no longer grows from its content — only use it when you genuinely need height queries.
Why is nothing inside my query changing?
The three usual causes: the container is missing container-type; the name in @container does not match container-name (or the container has a name but the query omits it); or the styled element is not a descendant of the container. Note that a container cannot query itself, only its descendants.
What does a scroll-state query need?
The container must declare container-type: scroll-state and the query is written as @container scroll-state(stuck: top), reporting whether the element is stuck to an edge, scrollable, or snapped on an axis. It cannot be mixed with size conditions — this tool raises an error when the type and condition disagree.
What about older browsers?
Keep the base styles outside the queries (the tool emits an @supports not (container-type: inline-size) fallback block), so browsers without container query support still get a sensible default instead of nothing. Container queries are supported in all current browsers.
Keywords：container querycontainer-typeat-containercss containmentresponsive componentsscroll-state容器查询响应式组件container query 生成断点前端布局