Design system · Component review 27

Demo container

Container queries respond to the width of a real element. The adopted workspace frames that element and keeps the slider, Fit action and live measurement outside the test layout.

Adopted direction: the shared container control has a clearer specimen bed and measurements. The original Guide resize zone is unchanged.

Change the query boundary

Shrink each specimen past the 2xs container threshold. The child switches direction through the same flex-col@container(<=2xs) class in all three versions.

01

Original Guide

Drag-to-resize zone

Media

A visual region

Content

Stacks when this wrapper narrows.

The original responsive Guide keeps its edge handles and breakpoint ruler; that page is unchanged.

02

Previous

Earlier shared real-width control

Media

A visual region

Content

Stacks when this wrapper narrows.

Query card controls
Measuring container…

A native range changes the actual wrapper width. The status reports its measured size, and Fit restores available space.

03

Adopted

Framed container workspace

Media

A visual region

Content

Stacks when this wrapper narrows.

Query card controls
Measuring container…

A subtle specimen bed and clearer separation between canvas, width slider, Fit and live measurement improve scanning without changing the query boundary.

Actual Guide use

The responsive-design guide retains its original draggable viewport example and visible ruler.

Open /guide/responsive-design
/examples/responsive-gallery

The Guide iframe demonstrates viewport changes. The shared container control above changes only a wrapper, so the page viewport remains fixed.