Skip to content

Container Query Playground

Live editor for CSS @container rules. Resize the parent visually, watch component breakpoints flip, and copy the exact named-container CSS for your codebase.

Container Query Playground

Container Query Playground

Drag the right edge to resize the parent container and watch @container rules apply.

container-name: card
420px
Adaptive Component
Layout flips automatically based on the parent width, not the viewport.

Generated CSS

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

.card {
  display: flex;
  flex-direction: column;
  padding: 12px;
  font-size: 13px;
  border-color: #10b981;
}

.card img {
  display: none;
}

@container card (min-width: 320px) {
  .card {
    display: flex;
    flex-direction: row;
    padding: 16px;
    font-size: 14px;
    border-color: #0ea5e9;
  }
  .card img {
    display: block;
  }
}

@container card (min-width: 480px) {
  .card {
    display: flex;
    flex-direction: row;
    padding: 20px;
    font-size: 16px;
    border-color: #8b5cf6;
  }
  .card img {
    display: block;
  }
}

@container card (min-width: 640px) {
  .card {
    display: grid;
    grid-template-columns: 120px 1fr;
    padding: 24px;
    font-size: 18px;
    border-color: #f43f5e;
  }
  .card img {
    display: block;
  }
}

Breakpoints

Last updated:

This tool is provided as-is for convenience. Output should be verified before use in any production or critical context.

For AI agents: how to call this tool

Machine-readable contract, endpoints and examples. Humans can ignore this section.

Best Path For Builders

Browser workflow

Runs instantly in the browser with private local processing and copy/export-ready output.

Browser Workflow

This tool is optimized for instant in-browser execution with local data handling. Run it here and copy/export the output directly.

/container-query-playground/

For automation planning, fetch the canonical contract at /api/tool/container-query-playground.json.

How to Use Container Query Playground

  1. 1

    Pick a scenario

    Choose a starting scenario like Product Card or Sidebar Widget. Each scenario defines a named container plus a stack of breakpoints with their own layout, padding, and font size.

  2. 2

    Resize the parent

    Drag the right edge of the preview frame or use the slider above it. The active breakpoint updates instantly and the highlighted CSS rule shows which @container query is matching.

  3. 3

    Edit breakpoints

    Use the Breakpoints panel to tune min-width, layout (stack/row/grid), padding, font size, and accent color. Add new breakpoints to model larger container sizes for the same component.

  4. 4

    Copy the CSS

    The right-side CSS panel emits a complete container-type / container-name declaration plus one @container block per breakpoint, ready to drop into a stylesheet.

Frequently Asked Questions

What is Container Query Playground?
Container Query Playground is a visual editor for CSS @container rules. Resize a named parent container with a slider or drag handle and watch a child component reflow according to your breakpoints.
How is this different from media queries?
Media queries respond to viewport size; container queries respond to a specific ancestor's size. The playground sets container-type: inline-size on the parent so child rules trigger based on parent width, not page width.
Does the generated CSS include container-type?
Yes. The exported block declares both container-type: inline-size and container-name on the parent, then emits one @container rule per breakpoint with the matching min-width threshold.
Does it send my data to a server?
No. All breakpoint logic and CSS generation happen client-side. Nothing is uploaded; the preview is a live browser render of your config.
Can I add or rename breakpoints?
Yes. Use the Breakpoints panel to add a new breakpoint, set its min-width, layout, padding, font-size, and accent color. The base breakpoint (min-width 0) is locked but every other breakpoint is fully editable.