CSS Container Query Generator

What it does

The CSS Container Query Generator builds a ready-to-paste @container rule — the CSS that lets a component restyle itself based on the size (or a custom property) of its own container, rather than the browser viewport. Pick a container type, set a breakpoint or a custom-property condition, and type the styles that should apply once it matches. A live preview updates as you change any option: drag the sample container's resize handle for a size/inline-size query, or flip the checkbox for a style query.

What a container query is

A media query only ever sees the viewport. A container query lets an element respond to the size of its nearest containment context instead — so the same card component can lay out one way in a wide sidebar and another way when it's squeezed into a narrow column, regardless of the overall screen size:

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

@container sidebar (min-width: 400px) {
  .card {
    display: flex;
    flex-direction: row;
  }
}

container-type opts the element into containment (inline-size for width-only, size for width and height); container-name is optional and lets you target that specific container by name instead of the nearest ancestor with container-type set.

The three container types

• Inline-size — the most common choice. Establishes containment on the inline axis (width in a horizontal writing mode) only, so min-width/ max-width conditions can query it.
• Size — containment on both axes, so height-based conditions also become possible. Requires the container to have an explicit or constrained height; an auto-height container can't be size-contained.
• Style — queries a custom property's value instead of a dimension, via style(--prop: value). Doesn't require container-type: size or inline-size — any container establishes a style-query context. Useful for a component that should restyle based on a theme or state variable set higher up the tree.

How to use it

1. Optionally name the container — leave it blank for an anonymous container that matches the nearest ancestor with containment set.
2. Pick a Container Type.
3. For Inline-size/Size, choose a condition (min-width, max-width, or a min+max range) and set the breakpoint(s) in pixels. For Style, set the custom property name and the value it should match.
4. Type the styles that apply once the condition matches — they're wrapped in a .card selector inside the @container block, matching the preview. Need help building the flex or grid rules themselves? Try the CSS Flexbox Generator or the CSS Grid Generator and paste their output in here.
5. Copy the CSS, plus the demo markup if you want to reuse the preview's structure, and adjust the .card selector to match your own component.

FAQ

Why does my @container rule need a selector, unlike @media? A media query's condition is about the viewport, so its body can hold plain declarations. A container query's condition is about an element's own size — and that element might not carry the properties you're toggling — so the browser needs a selector inside the block to know what to restyle.

Why doesn't size containment work on my element? container-type: size requires the element to have a definite height (or aspect-ratio). Without one, the browser can't establish size containment and the query never matches — switch to inline-size if height isn't fixed.

Can I combine a size condition and a style condition? Not in one @container rule — pick whichever this tool's condition targets, then nest a second @container block by hand if you need both.

Does this tool store or upload anything? No. Everything, including the live preview, runs locally in your browser — nothing you type ever leaves your device.

What if I need a viewport-based breakpoint instead? Use the CSS Media Query Generator — same idea, but keyed to the browser viewport rather than an element's container.