Container Queries for Component-Level Responsive CSS
Media queries answer a viewport-level question: how wide is the browser? Reusable components often need a different answer: how much space does this component have where it was placed?
CSS container queries solve that problem. A card can render compactly in a sidebar and switch to a horizontal layout in a wide content area without knowing either page layout in advance.
Why viewport breakpoints leak layout assumptions Consider a reusable article card. A media query might switch it to two columns when the viewport exceeds 900 pixels:
