Media queries ask: how wide is the viewport? Container queries ask: how wide is my parent? This seemingly small shift fundamentally changes how we architect responsive components. A card component can now be truly portable — it adapts to wherever it's placed, not to the screen it's viewed on.

The Containment Model

To use container queries, declare a containment context with container-type: inline-size. Then child elements use @container rules instead of @media rules. The query resolves against the nearest containment ancestor.