Experiment
A card that responds to its container
The same component, dropped in a sidebar and a wide column, reflows on its own width — not the viewport's. Container queries make components truly reusable.
From the Modern web platform track
For years "responsive" meant "responds to the viewport," which broke the moment you reused a component in a narrow slot. Container queries fix that: a component reads the width of its container and lays itself out accordingly.
Drag the container width in the demo and watch one card flip from stacked to side-by-side with no JavaScript and no viewport media queries. It's one of the highest-leverage additions to the 2026 platform — drop it into a design system and every card just works everywhere.