IconVault logoIconVault
Sign in

Container Queries Lab - Free Online CSS @container Playground | IconVault

Resize a container with a slider, write @container rules and watch components restyle live. Free, runs fully in your browser.

All tools

Container Queries Lab

Resize a container and watch @container rules restyle it live

5 of 5 free uses left
Browser support:Not supported in this browserContainer queries ship in Chrome 105+, Edge 105+, Safari 16+ and Firefox 110+. Unlike media queries, they respond to the parent container, not the viewport.
Container width560px

Drag the slider and watch the card restyle at the 460px container breakpoint.

@container rules

5 of 5 free copies left.

Live demo

Container-aware card

This card restyles when its container (the dashed box) crosses 460px, wherever it sits on the page. The viewport width does not matter.

container width: 560px

Generated code

/* 1. Mark an element as a query container */
.card-wrap {
  container-type: inline-size;
  container-name: demo;
}

/* 2. Style descendants based on the CONTAINER width, not the viewport */
@container demo (min-width: 460px) {
  .cq-card {
    flex-direction: row;
    align-items: center;
  }
  .cq-art {
    width: 168px;
    height: 128px;
    flex-shrink: 0;
  }
  .cq-title {
    font-size: 20px;
  }
}

@container demo (max-width: 459px) {
  .cq-btn {
    width: 100%;
  }
}

About this tool

IconVault's Container Queries Lab makes CSS @container click: drag a slider to resize a container, write @container rules, and watch the card inside restyle live as the container crosses your breakpoints. Copy the working code when you are done. It is free and runs fully in your browser.

Container queries are the biggest responsive-design shift since media queries: components now respond to their container's size instead of the viewport, which makes truly reusable cards, sidebars and widgets possible. The lab is the fastest way to build intuition before using them in production.

Frequently asked questions

Popular searches

container queriescss container queriescontainer queries tutorialcss @containercontainer queries playgroundcontainer queries democontainer queries lablearn container queriescss container queries examplescontainer-type inline-sizecontainer query vs media queryresponsive components csscomponent based responsive designcss container queries browser supportcontainer queries cheat sheethow to use container queries@container css rulecontainer query breakpointscontainer queries card layoutcontainer queries sidebarcss container namecontainer queries units cqwcqw cqh unitscontainer query length unitsstyle queries css@container style querycss containmentcontainer queries 2024modern css responsiveintrinsic web designreusable components csscard component responsivecontainer queries generatortest container queries onlinecontainer query visualizercss container queries tool freecontainer queries codepen alternativecontainer queries explainedcontainer queries for beginnerscontainer queries best practicescontainer queries fallbackcontainer queries polyfillcan i use container queriescss nesting container queriescontainer queries gridcontainer queries flexboxresponsive widget cssdashboard card responsive cssfree css playground onlineinteractive container queries demo

More tools

Code Playground

Write HTML, CSS & JS with live preview.

JSON Formatter

Beautify, validate & minify JSON.

Base64 Encoder

Encode & decode text and files.

JWT Decoder

Inspect tokens without sending them anywhere.

Coming soon

CLI

Coming soon

Figma plugin

Coming soon

VS Code extension

Coming soon

Chrome extension

Coming soon

AI icon generator

Coming soon

Team workspaces

Coming soon

View all 10+ tools →