Container Queries vs. Viewport Media Queries

Overview of container queries

Container queries enable the styling of elements based on available space. They allow us to build resilient components that are adaptable across infinite, unknown layout arrangements. This is in contrast to viewport media queries, which require style changes to be orchestrated at the page level. Let’s build up our knowledge of how container queries work by examining practical use cases and creating size-agnostic components.

We’ll learn how to make cards fully responsive to any layout, create truly fluid typography, and use Grid with container queries to adapt form and navigation arrangements. We’ll also consider accessibility within the solutions and see how container queries can actually help improve accessibility.

Exploring responsive design techniques

You’re most likely familiar with responsive design and layouts that respond to the viewport, like the one pictured below: