New toolFree · No signup

CSS Container Query Builder

Container queries let components respond to their parent container's size — not the viewport. Set a container-name and container-type on the parent, define breakpoints with CSS rules, and drag the preview slider to see the element respond in real time.

Share on X LinkedIn

Presets

Container name

Container type

Parent selector

Child selector

@container breakpoints

Breakpoint 1

→

Breakpoint 2

→

Preview — 420px container

↔ drag slider

Card Title

Resize the slider to see container queries in action

Green dashed border = container. Card responds to @container breakpoints you defined.

@container CSS Output

/* Container setup */.card-wrapper {  container-name: card;  container-type: inline-size;} @container card (max-width: 320px) {  .card {    flex-direction: column;    gap: 0.75rem;  }} @container card (min-width: 320px) {  .card {    flex-direction: row;    gap: 1.5rem;  }}

How to use

Pick a preset

Start from 4 presets (card, sidebar, hero, grid) to see a working @container setup immediately.

Configure the container

Set container-name, container-type (inline-size is most common), and the parent + child CSS selectors.

Add breakpoints

Each breakpoint has optional min-width and max-width thresholds, plus a list of CSS property:value rules.

Preview and copy

Drag the width slider to see the container query fire in real time. Copy the complete CSS when done.

More layout tools

From our directory of 30+ CSS tools.

Browse all →

layouts

CSS Grid Generator

Visually build CSS grid layouts and export production-ready code.

#grid#layout#responsive

Know a great CSS tool?

Submit it to the directory and help developers discover it.

Submit a tool →