It’s been a couple of years since container queries started landing in browsers… so why isn’t anyone using them? It turns out that container queries are kinda tricky; they’re not as straightforward as media queries. In this tutorial, we’ll break it all down and make sense of them, so that you can start using them in your work.

Josh W. Comeau's platform provides resources in frontend development, React.js, and CSS, offering insightful articles, tutorials, and code examples. With a focus on accessible and creative web development techniques, Josh W. Comeau empowers developers to craft engaging user experiences and solve complex problems in the world of web development.

Josh W Comeau

Container queries, a long-sought CSS feature, allow the application of conditional CSS based on an element's container rather than the viewport. Despite being supported in all major browsers for nearly two years, adoption has been slow due to their complexity. This post explains the mechanics of container queries, their advantages, and how they can transform responsive design. It also introduces the Containment API as a solution to the core challenges posed by container queries.

A Friendly Introduction to Container Queries • Josh W. Comeau

Link to this heading Solving an impossible problem

Link to this heading Our first container query

Link to this heading A new responsive world