Container queries

CSS rules that respond to the size of an element’s container rather than the viewport — container-type: inline-size on the parent, @container (min-width: 32rem) on the child’s styles — so that a component lays itself out by the space it is actually given, and the same card is one column in a sidebar and two in a main area without knowing which it is in

The feature that makes a component responsive on its own terms, which is what a design system needed all along: a media query knows the viewport, but a component is placed in a sidebar, a modal, a grid cell, and only the container knows how wide that is. Container units (cqi, cqw) size type and spacing by the same measure. Baseline across browsers since 2023. The rule here is container queries for components, media queries for the page shell; a card that carries @container can be dropped anywhere.