// build container queries visually — export clean CSS
Build responsive component styles using modern CSS container query syntax. Visual builder with live preview, breakpoint controls, and instant CSS export.
container-name and @container rule
Your container query CSS will appear here
Configure your container and breakpoints, then click Generate CSSEnter a name for your container element (e.g. "card", "sidebar").
Click "+ ADD" to create breakpoints with min/max width conditions and styles for each.
Click Generate CSS, then copy the output or download it as a .css file.
CSS Container Queries allow components to respond to the size of their container, not the viewport. This enables truly reusable, context-aware components — a card looks right whether it's in a wide layout or a narrow sidebar.
This tool generates the container shorthand for your parent element and the corresponding @container rules for responsive child styles.
A CSS container query (@container) lets you apply styles to an element based on the size of its containing element, rather than the viewport size. This makes components truly reusable across different layout contexts.
inline-size enables querying the container's inline dimension (width in horizontal writing modes). size enables querying both inline and block dimensions. block-size enables height queries only. normal is used for style queries without size containment.
No, but naming your container is recommended when you have nested containers or want to be explicit about which container a query targets. Without a name, the query targets the nearest container ancestor.
Container queries are supported in all modern browsers: Chrome 105+, Firefox 110+, Safari 16+, and Edge 105+. As of 2025, browser support exceeds 93% globally, making them safe to use in production.
Yes. You can combine conditions using the and keyword: @container card (min-width: 400px) and (max-width: 700px). This tool's builder supports setting both values per breakpoint to generate these compound conditions automatically.
Media queries respond to viewport size — the whole page. Container queries respond to the size of a specific parent element. This means the same component can look different in a narrow sidebar versus a wide main column, without any JavaScript or extra CSS.
CSS Container Queries represent one of the most significant advances in responsive design since media queries were introduced. While media queries let you respond to the size of the browser viewport, container queries let individual components respond to the size of their containing element. This seemingly small shift has enormous implications for how we build UI components.
Before container queries, building a truly reusable card component was surprisingly difficult. If your card needed to display differently when placed in a 300px sidebar versus a 900px main column, you had to write media queries targeting the viewport — which meant your component was aware of (and tightly coupled to) the page layout around it. Container queries break that coupling entirely.
💡 Looking for premium CSS templates and UI kits? MonsterONE offers unlimited downloads of templates, UI kits, and assets — worth checking out.
To use container queries, you first declare a containment context on a parent element using the container property (or its longhand container-type and container-name). Then, inside an @container rule, you write styles that apply when the container meets certain size conditions:
/* Step 1: Establish a containment context */
.card-wrapper {
container: card / inline-size;
}
/* Step 2: Query the container size */
@container card (min-width: 400px) {
.card {
display: flex;
flex-direction: row;
}
}In this example, whenever .card-wrapper is at least 400px wide, its child .card switches to a horizontal flex layout. This works regardless of where .card-wrapper appears on the page.
The container-type property determines which dimensions of the container become queryable. Here's when to use each value:
You can name a container using container-name, which lets you target specific containers in your @container rules. Without a name, @container targets the nearest ancestor container:
/* Anonymous container */
.wrapper { container-type: inline-size; }
@container (min-width: 500px) { .child { ... } }
/* Named container */
.sidebar { container: sidebar / inline-size; }
@container sidebar (min-width: 300px) { .widget { ... } }Naming containers becomes essential when you have nested container contexts and need to query a specific ancestor rather than the nearest one.
Container queries and media queries are complementary tools, not competitors. Here's a practical guide:
The best practice in modern CSS architecture is to use media queries for the macro layout (the "bones" of the page) and container queries for the components that live within that layout. This creates a clean separation of concerns and makes your components genuinely portable.
As of 2025, CSS container queries enjoy excellent browser support. Chrome added support in version 105, Firefox in 110, and Safari in 16. Edge followed Chrome's timeline. Global support sits comfortably above 93%, which is well above the threshold most teams use for shipping without a polyfill.
For projects that need to support older browsers, a JavaScript polyfill exists (container-query-polyfill by Google Chrome Labs), though it does come with performance tradeoffs. For most new projects, however, you can use container queries confidently without any polyfill.
Here are several production-ready patterns you can generate with this tool and apply immediately:
/* Responsive card: stacks vertically when narrow, horizontal when wide */
.card-wrapper {
container: card / inline-size;
}
.card {
display: flex;
flex-direction: column;
gap: 1rem;
}
@container card (min-width: 450px) {
.card {
flex-direction: row;
align-items: center;
}
.card__image {
width: 200px;
flex-shrink: 0;
}
}This pattern is ideal for product cards, blog post teasers, user profile tiles, and any component that appears in both narrow and wide contexts within your application.
When using the CSS Container Query Builder, keep these best practices in mind. First, give your container a descriptive name that reflects the component it wraps — card, sidebar-widget, data-table. This makes your CSS self-documenting. Second, start with inline-size as your container type unless you have a specific reason to query height. Third, write your base styles first (the mobile-first or narrow version), then layer on your container query breakpoints for wider sizes. This aligns with progressive enhancement principles and often results in cleaner code.
Finally, remember that the container query sits on the parent wrapper, not on the component itself. The component's styles live inside the @container rule. This is the most common source of confusion for developers new to container queries.