Local CSS container query generator

Build component responsive CSS with container queries

Name a container, choose its containment type, and copy a focused @container rule for reusable components.

CSS ready

Generated container query

container-name: cardinline-size

Component responds to its parent container.

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

@container card (min-width: 30rem) and (max-width: 60rem) {
  /* Responsive component styles */
}

Everything runs in your browser. Nothing is uploaded or saved.

Why use container queries?

Viewport media queries describe the screen; container queries let a component respond to the space its parent gives it.

Declare a query container with container-type, then target its descendants with a named @container rule.

Keep the name close to the component responsibility so nested layouts remain readable.

Container query questions

What is inline-size?

It enables queries on the container's inline dimension, usually its width, and is a good default for cards and panels.

When would size help?

Use size when the component needs both inline and block dimensions for its layout decisions.

Does the rule include the setup?

Yes. The output includes the container declaration and the named query block.