Skip to content

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.

Agent Invocation

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.