Responsive Containers

The pros of container queries

While the flexbox and grid solutions we just covered are, in fact, responsive to a container, true container queries became available in evergreen browsers as of February 2023, with the release of Firefox 110.

The key feature of container queries is how they allow us to orchestrate changes based on container size instead of viewport size.

In the past, we often used media queries to try to control the micro things that happen within components within a layout. That was always precarious, especially as adjustments were needed when a component changed size due to a new location in the layout or placement within a different page.

Container queries flip this around: we can consider variations of a component across multiple space possibilities, making the component more resilient to being placed wherever required.

For example, here’s the subscription form; notice how it adapts to different locations within the layout—in an article element, in the sidebar, and when allowed to grow to the full width at the top of the layout.