What Are CSS Container Queries?

Introduction

CSS is always changing, giving web developers new tools to make websites look good on all devices. One of these new tools is CSS container queries.

What are CSS Container Queries?

CSS container queries are a new feature in CSS. They let you apply styles based on the size of a container, not the size of the whole browser window. This helps make designs that adjust to the size of different parts of a page, not just the overall size of the browser window.

How Do CSS Container Queries Work?

CSS container queries work like media queries but for elements (containers) instead of the whole viewport. Here’s a simple example of how to use container queries:


01: .container {
02:   container-type: inline-size;
03:   container-name: main;
04: }
05: 
06: @container main (min-width: 300px) {
07:   .item {
08:     background-color: lightblue;
09:   }
10: }

In this example:

.container is given a container-type of inline-size and a container-name of main.
The @container rule applies styles to .item when the container named main is at least 300 pixels wide.

Benefits of Using CSS Container Queries

More Control: They give you more control over how each part of a page looks, making it easier to design for different screen sizes and layouts.
Reusable Components: Container queries help you make components that can be reused because they adapt based on the container size, not the viewport size.
Better Flexibility: They offer more flexibility in design, especially for complex layouts where parts need to adjust on their own.

Practical Use Cases

Component Libraries: When building reusable components, container queries ensure they adapt well no matter where they are placed on the page.
Nested Layouts: For layouts where the size of a child element depends on its parent, container queries are very useful.
Dynamic Content: For websites with changing content, like content management systems or e-commerce sites, container queries help keep the design consistent.

Example: Responsive Card Component

Let’s make a responsive card component using container queries:


01: <div class="card-container">
02:   <div class="card">
03:     <h2>Card Title</h2>
04:     <p>This is some content inside the card.</p>
05:   </div>
06: </div>


01: .card-container {
02:   container-type: inline-size;
03:   container-name: card;
04: }
05: 
06: @container card (min-width: 400px) {
07:   .card {
08:     padding: 20px;
09:     background-color: lightyellow;
10:   }
11: }
12: 
13: @container card (min-width: 600px) {
14:   .card {
15:     padding: 30px;
16:     background-color: lightgreen;
17:   }
18: }

In this example, the card's padding and background color change based on the container's width.

Browser Support

Right now, CSS container queries are new and might not work in all browsers. It’s important to check compatibility [↗] and use backups to make sure your design works everywhere.

Conclusion

CSS container queries are a strong new tool in CSS, giving you more control and flexibility for responsive design. By using styles based on the size of elements, developers can create more adaptable and reusable layouts. As more browsers support container queries, they will become a standard tool for modern web development.

EDDYMENS

What Are CSS Container Queries?

Table of contents

Introduction