CSS Container Query Builder

Overview

The CSS Container Query Builder scaffolds an @container rule with sensible defaults: a container-type declaration for the parent, an optional named container, and a query against width or block-size. Output is a complete, copy-paste block that styles a child differently when its container hits a chosen breakpoint.

This is the workflow for building self-aware components — cards that switch from stacked to side-by-side based on their slot, not the viewport. Front-end engineers learning how to use CSS container queries for component-driven layouts or how to write a @container width query will reach for it when migrating off legacy viewport-only media queries.

How it works

The CSS Containment Module Level 3 introduced container-type: inline-size (and size), which tells the browser to treat the element as a containment context that child @container queries can reference. container-name lets a child target a specific ancestor by name, which is essential when nested.

The query syntax mirrors media queries — @container (min-width: 400px) { ... } — but resolves against the named container's box, not the viewport. Browsers compute container queries during layout, so the matched ancestor must establish a containment context or the query never fires.

Examples

• A card grid → .card { container-type: inline-size; } plus @container (min-width: 400px) { .card__body { display: grid; grid-template-columns: 1fr 2fr; } }.
• A named container → container-name: sidebar and @container sidebar (min-width: 200px) { ... }.
• Block-size query → @container (min-height: 600px) { .hero { padding: 4rem 0; } }.
• Style-based query (experimental) → @container style(--theme: dark) { ... }.

FAQ

Container query vs media query?

Media queries match the viewport. Container queries match a specific element's box. Use container queries for components that can appear in different slot widths.

Why isn't my container query firing?

Most often the parent is missing container-type: inline-size. Without it, the parent is not a containment context and queries never match.

Does container-type affect layout?

Yes — container-type: inline-size makes the element a block-formatting context and isolates its size from the parent's intrinsic sizing. Mostly invisible, but can change overflow behaviour.

Is browser support solid?

Yes for evergreen browsers since 2023. Old Safari, Firefox, and Chrome versions need a fallback layout that does not depend on the query.

Try CSS Container Query Builder