Container Queries Demo

Resize the container, not the viewport. The product card responds to @container product breakpoints — same card, different parent width.

Controls

Container width 320px

Scale title with cqi units

Container width

320px

Viewport width

—

Active @container rule

compact

Media query would say

—

Drag the lime handle or use the slider. Viewport: resize the browser — card layout stays tied to container.

SKU · KB-7742 · In stock

Hot-swappable switches, gasket mount, and per-key RGB. Ships with PBT keycaps and USB-C coiled cable.

What drives layout
Parent container inline size

What does NOT

Browser viewport width alone