Generator Tools

CSS Container Query Generator

Generate CSS container queries in your browser. Set container-type, add @container breakpoints, and watch a live preview match as you resize.

Quick presets

Start from a common pattern

Container setup

The parent that will be queried

container-type

inline-size is the safe default for most layouts. size lets you query height too, at the cost of forcing the container to also contain its own size.

container-name (optional)

Names let you target a specific ancestor when containers are nested. Use a CSS identifier (letters, digits, hyphens, underscores).

Child base styles

Styles before any query matches

These declarations apply to the child element regardless of container size. Each breakpoint below adds to or overrides them.

Breakpoints

@container rules at each size

Breakpoint 1Matching now

Feature

Value

Unit

@container card (min-width: 480px)

Declarations applied when matching

Live preview

Resize the container to see queries fire

640 px wide360 px tall1 matching

Item 1

Resize the container to watch styles change.

Item 2

Resize the container to watch styles change.

Item 3

Resize the container to watch styles change.

Container type: inline-size · name: card · 1 of 1 breakpoint matching

Drag the handles on the right edge, bottom edge, or bottom-right corner to resize the preview container. Matching breakpoints get a blue border above.

Output

Your CSS

.container {
  container-type: inline-size;
  container-name: card;
}

.container > .child {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: 1.25rem;
}

@container card (min-width: 480px) {
  .container > .child {
    grid-template-columns: auto 1fr;
    padding: 1.5rem;
  }
}

Tailwind CSS 4

HTML snippet for Tailwind container queries

// Tailwind CSS 4 (built-in container queries):
<div class="@container/card">
  <div class="[display:grid] [grid-template-columns:1fr] [gap:1rem] [padding:1.25rem] @min-w-[480px]/card:[grid-template-columns:auto_1fr] @min-w-[480px]/card:[padding:1.5rem]">child</div>
</div>

// Tailwind 3 requires the official @tailwindcss/container-queries plugin.

Tailwind 4 ships container queries built-in. For Tailwind 3, add the official @tailwindcss/container-queries plugin.

container-type cheat sheet

inline-size: the container queries respond to the element's inline axis (usually its width). Most common.
size: queries can read both width and height. The container is forced to contain its own size, so it cannot grow based on its children in the queried axis.
normal: the element is not a query container. Use this when you no longer want a parent to act as a container.

How container queries differ from media queries

Media queries respond to the viewport. Container queries respond to the chosen ancestor element. The same component can be wide in a hero section and narrow in a sidebar without any extra props.
A container only counts when you opt it in with container-type. Until then, queries fall back to the nearest ancestor that is a container, or never match if none exists.
You can name containers with container-name and target a specific ancestor when containers are nested, for example @container card.
Browser support is broad (Chrome 105+, Edge 105+, Safari 16+, Firefox 110+). Older browsers ignore the query and just use the base styles.

How to use

Pick a preset (Responsive card, Card grid, Sidebar layout, or Responsive typography) to start from a working example, or build from the default.
Set the container-type and an optional container-name on the parent. Use inline-size for width queries, size if you also need height, or normal to opt out.
Add base styles that apply to the child element before any query matches. Each row is a property and a value, and the property field has a suggestion list for common ones.
Add breakpoints with Add breakpoint. For each one, pick the feature (min-width, max-width, min-height, max-height, or aspect ratio), enter a value, and add the declarations that should apply when the query matches.
Drag the handles on the live preview to resize the container. Matching breakpoints get a blue border and the styles merge into the demo children so you can verify behavior in real time.
Click Copy CSS to grab the parent setup plus every @container rule, or Copy snippet to take the Tailwind 4 HTML version.

About this tool

CSS Container Query Generator builds the modern @container syntax (CSS Containment Module Level 3) and shows the result in a live, resizable preview. Pick a container-type (inline-size for width-only queries, size for both axes, or normal to opt out), optionally give the container a name so nested layouts can target it explicitly, and add as many breakpoints as you need. Each breakpoint supports min-width, max-width, min-height, max-height, min-aspect-ratio, and max-aspect-ratio, with values in px, rem, or em, and a list of declarations that apply when the query matches. The preview pane has drag handles on the right edge, bottom edge, and bottom-right corner; as you resize, the tool marks every matching breakpoint in blue and applies the merged styles to a real demo block so you can see the layout change exactly as the browser would render it. The CSS output is grouped into a parent block (container-type and container-name on .container), a base style block (declarations before any query matches), and one @container block per breakpoint, ready to copy and paste into a stylesheet. A second output block emits a Tailwind 4 HTML snippet using the built-in @container, @min-w-[length], @max-w-[length], @min-h-[length], and @max-h-[length] variants, with an arbitrary-property fallback so any CSS declaration round-trips accurately. Includes presets for common patterns: a responsive card that stacks then goes side-by-side, a card grid that flows from one to two to three columns, a sidebar layout that stacks on narrow widths, and responsive typography that scales based on the container. Useful when you want a component to be responsive based on its own ancestor instead of the viewport, when designing a layout that should work in both a narrow sidebar and a wide hero, or when learning the @container syntax without leaving the browser. All construction and preview rendering run locally on your device; nothing you type leaves the browser.

Free to use. Works in your browser. No signup, no login.

Related tools

CSS Container Query Generator

Start from a common pattern

The parent that will be queried

Styles before any query matches

@container rules at each size

Resize the container to see queries fire

Your CSS

HTML snippet for Tailwind container queries

How to use

About this tool

You may also like

CSS Grid Generator

CSS Flexbox Generator

CSS Clamp Generator

CSS Box Model Visualizer

CSS Animation Generator

CSS Formatter

CSS Container Query Generator