Container Query Generator

Create container queries for component-based responsive design.

Container Setup

Container Name

Container Type

Query Breakpoint

Min Width400px

Container Units

Responsive Unit

Container query units are relative to the container size, not the viewport.

Preview

Container Width300px

Container: 300px (query inactive)

Browser Support

Container queries are supported in Chrome 105+, Safari 16+, and Firefox 110+. Consider providing fallbacks for older browsers.

Generated CSS

/* Container Setup */
.card-container {
  container-name: card;
  container-type: inline-size;
}

/* Short-hand */
.card-container {
  container: card / inline-size;
}

/* Container Query */
@container card (min-width: 400px) {
  .card-content {
    /* Styles when container is >= 400px */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
}

/* Using Container Query Units */
.responsive-text {
  font-size: clamp(1rem, 5cqw, 2rem);
}

.responsive-padding {
  padding: 5cqw;
}

100%

Free, no
sign-up needed

Code written
by hand

85+

CSS tools
in one place

<1s

Copy-ready
CSS instantly

What is this

What is the CSS Container Query Generator?

Generate @container query CSS for component-level responsive design. Write container queries that respond to parent width, not viewport width.

Everything runs locally in your browser. Adjust the controls above, preview instantly, and copy clean, production-ready CSS — no account, no upload.

How to use

Using the CSS Container Query Generator

Everything lives in the panel at the top of this page. There is nothing to install — it all runs right here in your browser.

Set the container

Add container-type: inline-size to the parent wrapper. This establishes it as a container.

Define breakpoints

Enter the container widths at which the child layout should change (e.g., 400px, 600px).

Copy and customise

The output is a skeleton container query structure. Add your layout rules inside each @container block.

The output

What the generated code looks like

Clean, production-ready CSS — no vendor bloat, no unnecessary declarations.

container.css

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

.card {
  padding: 16px;
  font-size: 0.875rem;
}

@container card (min-width: 400px) {
  .card {
    padding: 24px;
    font-size: 1rem;
    display: grid;
    grid-template-columns: auto 1fr;
  }
}

@container card (min-width: 600px) {
  .card {
    padding: 32px;
  }
}

container-type: inline-size enables width-based container queries on the element. container-name is optional but required to query a specific ancestor when multiple container contexts exist.

Pro tips

Pro tips for better results

★

Container queries enable truly portable components

A component styled with container queries works in a sidebar, a main content area, and a modal without any class overrides. The component adapts to whatever space it is given.

★

Combine container and media queries

Use @media for global layout (columns, page structure) and @container for component-level adaptations within those columns. They are complementary, not competing.

FAQ

Frequently asked questions

Container queries are supported in Chrome 105+, Firefox 110+, and Safari 16+. Global usage support is above 90% as of 2025.

Yes, but use container-type: size (both inline and block) instead of inline-size. Then use min-height queries: @container (min-height: 200px). Note: block-size containers require explicit height to work correctly.