One of the goals when writing CSS is to build component parts that will adapt well to different (and unexpected) contexts. Ideally, a component can be placed inside any "container" element without it feeling broken or out of place. How can you accomplish this in a complex layout like a store where the primary component -- the "product" -- has to fit into a variety of list layouts, including the sidebar?

OddBird

CSS container queries and container units (like `cqi`) enable components to adapt their layout based on their parent container's size rather than the viewport. By declaring `container-type: inline-size` on elements like `product-list` and `shopping-cart`, you can use `@container` rules as breakpoints that respond to the container's dimensions. This approach is demonstrated through a store layout where a product component must fit into multiple list layouts including a sidebar.

Container Queries and Units in Action

Defining containers to measure in context