Skip to content

Container Query Playground

Edit CSS @container breakpoints, resize the parent by slider or drag handle to watch a component reflow, and copy the named-container CSS.

Container Query Playground

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

container-name: card
420px

Active breakpoint: sm

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

Updated . Provided as is. Check the output before you rely on it in production.

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.

Questions and answers

What is Container Query Playground?
Container queries are CSS @container rules that style an element by the size of its container instead of the viewport. This playground places a component in a named inline-size container, lets you add breakpoints with layout, padding, font size and color, resize the parent by slider or drag handle, and copy the CSS.
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.
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.