CSS Container Query Generator

Visually build @container rules and the container setup CSS — with live preview

Container Setup
Container type

Query width only (recommended)

Query Conditions
Quick Presets
1. Parent Container CSS 
.card-container {
  container: card / inline-size;
}
2. Container Query 
@container card (min-width: 400px) {
  /* styles applied when the container matches */
  .card {
    /* example: switch to horizontal layout */
    flex-direction: row;
  }
}
Copy combined CSS

Includes both the parent container setup and the @container rule, ready to drop into your stylesheet.

Live Preview
480px

Sample Card Component

Container matches — horizontal layout active.

Preview reflects min-width and max-width conditions in px. Other features still appear in the generated CSS.

Container-Relative Units Reference

UnitRefers toExample use
cqw1% of container widthfont-size: 5cqw
cqh1% of container heightpadding: 4cqh
cqi1% of inline size (width in LTR/RTL)margin-inline: 2cqi
cqb1% of block size (height in horizontal writing modes)gap: 3cqb
cqminsmaller of cqi / cqbborder-radius: 4cqmin
cqmaxlarger of cqi / cqbmin-height: 30cqmax

About CSS Container Query Generator

The CSS Container Query Generator is a free online tool that builds copy-ready @container rules and the matching container-type / container-name setup. It removes the guesswork from writing container queries by letting you configure container type, name, and feature conditions visually.

Container queries are the modern alternative to media queries for component-level responsive design. Instead of asking "how wide is the viewport?" you ask "how wide is the parent container?" — which means a card, sidebar widget, or modal can adapt to whatever space it gets, no matter where you place it.

Everything runs locally in your browser. Your selectors, names, and conditions are never sent to a server.

How to Use CSS Container Query Generator

  1. 1. Enter the parent selector of the element you want to act as a query container (e.g. .card-container).
  2. 2. Optionally give it a container-name so you can target it specifically when containers are nested.
  3. 3. Pick a container-type. Use inline-size for width-only queries (most common), size if you also need height, or normal for style-only queries.
  4. 4. Add one or more query conditions — pick a feature like min-width, enter the value and unit, and chain with and / or.
  5. 5. Watch the live preview resize and observe which layout activates.
  6. 6. Click Copy on either block separately, or use Copy both for the combined CSS. Paste into your stylesheet.
  7. 7. Wrap your component markup with the parent selector and you're done — no JavaScript, no media query breakpoints.

Common Use Cases

Reusable card components

Switch a card from vertical (stacked image + text) to horizontal (image left, text right) when the container is wide enough — same card, any context.

Sidebar widgets

Show full content in a wide sidebar; collapse to icons or condensed text in a narrow one, all driven by container width.

Dashboard tiles

Tiles in a CSS Grid auto-fit naturally to different sizes; container queries make each one re-flow internally based on its own width.

Modal and drawer content

Style the same form differently when the modal is small vs full-screen, without coupling it to the viewport.

Email-like templates

Build a component that adapts inside narrow email iframes or wide preview panes.

Library and design systems

Ship components that just work — consumers do not have to wire up media queries to make your card responsive.

Frequently Asked Questions