Use container queries when the component moves

Reusable card One customer card renders in a sidebar, modal, and dashboard panel at the same viewport width. Viewport width cannot explain the component's local space in all three placements. Local responsiveness Viewport owns the page; container owns the component Use media queries for page shell behavior and container queries for reusable components whose internal layout depends on local space. @media only One global width drives every instance. The card can move across layouts without dragging viewport assumptions with it. Reusable components should respond to the space they actually receive. 01 Ownership 02 Container 03 Try it What owns this…

Sign up free — one personalized lesson every day, matched to your role and goals.

Already have an account? Sign in