Container queries are one of the most requested CSS features ever. Unlike media queries that respond to the viewport, container queries let elements adapt based on their container's size — making truly reusable components possible.

Setting Up Containment

To use container queries, you first need to establish a containment context on a parent element using the 'container-type' property. This tells the browser to track the element's size.

Practical Examples

Card components are the perfect use case. A card in a narrow sidebar can show a compact layout, while the same card in a wide main content area can expand to show more details — all without JavaScript.