Component · Container Query Playground

01 · Drag the handle · watch it morph3 breakpoints

— px

Aurora · keyframe 03

Card adapts to its container.

Same DOM. Same CSS. Layout, type scale, and visible actions all flex with the parent — never the viewport.

base · stacked @container cqp (min-width: 360px) @container cqp (min-width: 620px)

02 · Compare · container query vs media querysame DOM

Container · @container cqppasses ✓

Resizes with its parent. Works inside grids, drawers, anywhere.

Viewport · @mediabrittle ✗

Only sees window width. Place this card in a half-width column and the breakpoint lies.

UsageAPI surface

Authoring contract

Set container-type: inline-size + container-name on the host, then declare style rules under @container <name> (min-width: …). Children read the container's inline size, not the viewport. Drop the component into a 320px sidebar or a 1200px main column — it adapts.

Hook	Values	Effect
`container-type`	inline-size · size · normal	Establish a query container on the parent.
`container-name`	ident	Target a specific container in nested setups.
`@container <name> (…)`	any size feature	Apply rules when the container matches.
`cqi` / `cqw` units	1cqi = 1% container inline-size	Typography that scales to its container.
JS event	`cqp:resize`	Fires with `detail.width` (px).
`prefers-reduced-motion`	—	Morph transitions removed; layout still updates.

View HTML

<div class="lsd-cqp__pane" style="container-type: inline-size; container-name: cqp;">
  <div class="lsd-cqp__card">
    <div class="lsd-cqp__card-thumb"></div>
    <div class="lsd-cqp__card-body">…</div>
  </div>
  <div class="lsd-cqp__handle"></div>
</div>

@container cqp (min-width: 620px) {
  .lsd-cqp__card { grid-template-columns: 240px 1fr; }
}