If you’ve been paying attention to Interop, the Browser Compatibility project from the three major Browsers (Firefox, Chrome and Safari), then you’ve probably heard of Container Queries. There’s been a lot of hype about container queries and what they could mean for Responsive Web Design (RWD). As of February 2023 Container Queries are finally shipped to all major browsers, meaning you can finally start using them. The question is, how do you start using Container Queries and why would you? This article will explain container queries made easy so you can get started using Container Queries today!
Estimated reading time: 4 minutes
The Concept behind Container Queries
The idea behind Container Queries stems from the need for components within a design to be responsive to their parent container. As MDN notes; “Container queries enable you to apply styles to an element based on the size of the element’s container.”
Take for example a layout in which you have three columns. Each column holds a card with an image, a heading, and text. Let’s say on desktop that all three cards display the image next to the text and on mobile you want the middle card to display its image horizontally next to the text and you want the other two cards to display the image above the text.
Before container queries you would be required to add additional class names and calculate the width of the window precisely as it shrinks. Using container queries and CSS Grid, this becomes a much simpler task.
Take this example from Web.Dev into consideration. The grid template columns of the parent container control the width of each card, and then the container queries adjust the display and responsive elements from there.
How many web developers does it take to center a div? Just one if they’ve read this article.
“Container queries enable you to apply styles to an element based on the size of the element’s container.”
MDN Docs
How to use Container Queries
To get started, you’ll want to create a container component that will hold some content. The container component will change its children based on its width. In the below example under ‘Container Queries In Action’ we have the containers as children of a flex element. Their widths are responsive.
The Container HTML:
<div class="container one">
<div class="background-img">
</div>
<div class="child">
<h2>Heading Is Big</h2>
Here is a paragraph of text. It is meant to wrap and do other stuff within the container query.
</div>
</div>The Container CSS:
.container {
container: card / inline-size;
border: 2px solid black;
min-width: 400px;
min-height: 400px;
}Note that the container property instantiates this .container element as a CSS Container which can now be queried.
The container size is subject to change when the screen media query changes making the container’s 33% width of the screen when the screen is less than 900px wide:
@media only screen and (max-width: 900px) {
.container {
min-width: 33%;
max-width: 33%;
min-height: 100px;
}
}When the Container is less than 200px wide, we remove the background image, and reduce the font sizes. This prevents us from losing our column layout on mobile devices.
@container (max-width: 200px) {
.container .child {
font-size: 18px;
}
.container h2 {
font-size: 1.35em;
}
.background-img {
background: none;
height: 0;
}
}The Container Queries In Action
As you can see in the example below, we have used Container Queries to create a responsive columned layout. The content changes based on the size of the container component. Resize your browser window to see how these containers change within this CodePen.
Notice that the image, heading, and font all change when the containers get below 200px wide. We can use responsive measurements (33% width) on the container elements and from there dictate what the containers children will do when the container reaches a certain width.
Want more fun CSS? Check out this article on taking a Graphic Design Grid to CSS Grid.
Conclusion
In this quick how to, we aimed to teach container queries made easy so you can get started using them today!
Photo by Planet Volumes on Unsplash