Embed this tool on your site 
<iframe src="https://devtoolbox.dedyn.io/tools/css-container-query-generator" width="100%" height="800" frameborder="0"></iframe>

CSS Container Query Generator

Build CSS container queries visually. Define a containment context with container-type and container-name, add responsive breakpoints with @container rules, and get production-ready CSS. Includes a resizable live preview. Everything runs in your browser.

⚙ Container Setup
⚡ Breakpoints
Ctrl+Enter Generate Ctrl+Shift+C Copy Ctrl+L Clear
</> Generated CSS
/* Click Generate CSS */
▷ Live Preview

Drag the right edge of the box below to resize the container and see the card respond.

Sample Card
This card adapts its layout based on the container width. Resize the container to see the effect.
Responsive
Container width: --

How Container Queries Work

CSS container queries allow you to apply styles to an element based on the size of its nearest containment context, rather than the viewport. This is a game-changer for component-based design because each component can respond to the space available to it.

Step 1: Define a Container

Set container-type on a parent element. Use inline-size for width-based queries (the most common case) or size for both width and height queries. Optionally give it a container-name so you can target it specifically in your @container rules.

Step 2: Write @container Rules

Use @container with size conditions like min-width and max-width to apply different styles depending on the container dimensions. If you specified a container name, use @container card-container (min-width: 400px) to target only that container.

Key Differences from Media Queries

Related Resources

CSS Container Queries Guide

CSS Grid Complete Guide

CSS Media Queries Guide

CSS Media Query Builder

CSS Grid Generator

Frequently Asked Questions

What are CSS container queries and how are they different from media queries?▼
CSS container queries let you style elements based on the size of their parent container rather than the viewport. Unlike media queries which respond to the browser window width, container queries respond to the width of the element's containing block. This makes components truly reusable because they adapt to whatever space they are placed in, whether that is a narrow sidebar or a wide main content area. You define a containment context with container-type and then use @container rules to apply conditional styles.
What is the difference between container-type inline-size and size?▼
container-type: inline-size establishes containment on the inline axis only (width in horizontal writing modes), which is the most common and recommended option. container-type: size establishes containment on both the inline and block axes (both width and height). Use inline-size for most responsive component designs. Use size only when you need to query the container height as well, keeping in mind that size containment can affect layout since the container cannot derive its size from its children on the contained axis.
Which browsers support CSS container queries?▼
CSS container queries are supported in all modern browsers including Chrome 105+, Firefox 110+, Safari 16+, and Edge 105+. This covers over 90% of global browser usage as of 2025. For older browsers, you can use a polyfill like the container-query-polyfill from Google Chrome Labs. The @container at-rule, container-type, and container-name properties all have broad support. Container queries are considered production-ready for modern web development.