CSS Container Queries

Container queries enable component-based responsive design. A CSS media query typically responds to viewport conditions, while a container query can change an element's presentation according to the size or supported characteristics of a containing element. This is especially useful when the same card, sidebar or navigation component appears in layouts of different widths.

For size-based queries, a developer establishes a query container and writes @container rules. The component can then switch from stacked to horizontal content when its available container space is sufficient. Container queries complement media queries rather than replacing them: the page may still need viewport-level breakpoints for its overall grid and navigation.

Good implementations should be tested with long labels, zoom, translated text and real content, not just a fixed design mockup. They also need sensible fallback behavior for older environments where relevant features are unavailable.