CSS Container Queries: The Future of Precision in Web Design

5 min readSep 29, 2024

Introduction:

In the world of web development, responsive design has traditionally been about making layouts adapt to the size of the browser’s viewport using media queries. However, what if the responsiveness of elements was dictated by the size of their container, rather than the viewport? Enter CSS Container Queries — a game-changing tool for more modular and flexible web design.

In this post, we’ll dive into what container queries are, why they matter, and how you can use them to improve your designs.

What are Container Queries?

CSS Container Queries allow you to apply styles to an element based on the size of its container, not the viewport. Unlike media queries, which rely on the overall screen size, container queries look at the dimensions of an element’s nearest container.

For example:

Media queries: “When the viewport is 768px wide, make this element 50%.”
Container queries: “When the container is 500px wide, make this element 50%.”

Why Use Container Queries?

Increased Modularity:
Container queries make it easier to create truly reusable, modular components that can respond to the size of their containing element.
More Precise Control:
You’re no longer dependent on the entire viewport size to control the styling of nested elements. This leads to more precise control over component behavior.
Improved Maintenance:
By decoupling component styles from the overall layout, container queries can help you avoid common pitfalls in maintaining large codebases where components break on different screen sizes.
Enhanced Flexibility for Layouts:
Container queries allow for better adaptability in various layouts, making it ideal for complex applications or websites where components appear in different places, with varying widths and heights.

How Container Queries Work

Here’s a simple example to illustrate how container queries are defined and applied in CSS:

/* Step 1: Define a container */
.container {
  container-type: inline-size;
  container-name: card;
}

/* Step 2: Write a container query */
@container card (min-width: 300px) {
  .child-element {
    font-size: 1.2rem;
  }
}

@container card (min-width: 600px) {
  .child-element {
    font-size: 1.5rem;
  }
}

In this example:

The .container element is declared as a "container" using container-type.
We’ve set up a container query that changes the font size of .child-element when the .container's width hits 300px and 600px respectively.

Key Features of Container Queries

Container Size: Queries can respond to the size of the container (e.g., width, height).
Container Name: Assign a name to the container to target it specifically in your queries.
Container Type: Control whether the container looks at inline or block dimensions.

How to Start Using Container Queries

Browser Support:
As of 2024, container queries are supported in most modern browsers like Chrome, Firefox, and Safari. Always check the latest browser compatibility.
Setting Up a Container:
To enable container queries, you first need to declare an element as a container using the container-type property.
Writing Queries:
Use the @container rule, similar to how you would use @media for media queries.

Example:

Let’s say you have a card component that appears in different layouts on your website. Sometimes the card is inside a narrow sidebar, while other times it’s in a wider content area. Instead of using media queries to adjust the card’s design for every possible screen size, you can use container queries to make it responsive to its own container.

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Media vs Container Queries</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Responsive Cards: Media vs Container Queries</h1>

    <!-- Card for Media Query Demo -->
    <section class="media-query-demo">
      <div class="card">
        <img
          src="./Assets/card1.jpg"
          alt="Image 1"
          style="width: 300px; height: 200px"
        />
        <p>This is a media query responsive card.</p>
      </div>
    </section>

    <!-- Card for Container Query Demo -->
    <section class="container-query-demo">
      <div class="card-container">
        <div class="card">
          <img
            src="./Assets/card2.jpg"
            alt="Image 2"
            style="width: 300px; height: 200px"
          />
          <p>This is a container query responsive card.</p>
        </div>
      </div>
    </section>
  </body>
</html>

CSS for Media Queries

In this first section, you’ll use media queries to change the card design based on the viewport size:

/* Global Card Styling */
.card {
  max-width: 100%;
  padding: 20px;
  margin: 20px auto;
  text-align: center;
  border: 1px solid #ddd;
  background-color: #f9f9f9;
}

.card img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.card p {
  font-size: 1rem;
}

/* Media Queries */
@media (min-width: 600px) {
  .media-query-demo .card {
    max-width: 50%;
    background-color: lightyellow;
  }

  .media-query-demo .card p {
    font-size: 1.2rem;
  }
}

@media (min-width: 900px) {
  .media-query-demo .card {
    max-width: 33%;
    background-color: lightblue;
  }

  .media-query-demo .card p {
    font-size: 1.4rem;
  }
}

CSS for Container Queries

Here’s how you can use container queries to modify the same card based on its container size:

/* Container Setup */
.card-container {
  container-type: inline-size;
  max-width: 100%;
  padding: 10px;
  margin: 0 auto;
}

/* Global Card Styling */
.card {
  max-width: 100%;
  padding: 20px;
  text-align: center;
  border: 1px solid #ddd;
  background-color: #f9f9f9;
}

.card img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.card p {
  font-size: 1rem;
}

/* Container Queries */
@container (min-width: 500px) {
  .container-query-demo .card {
    max-width: 80%;
    background-color: lightcoral;
  }

  .container-query-demo .card p {
    font-size: 1.2rem;
  }
}

@container (min-width: 800px) {
  .container-query-demo .card {
    max-width: 60%;
    background-color: lightgreen;
  }

  .container-query-demo .card p {
    font-size: 1.5rem;
  }
}

Explanation

HTML:

Two sections are created: one for the media queries demo and another for the container queries demo.
Each card contains an image and a paragraph.

CSS for Media Queries:

The media queries change the layout based on the viewport width. As the viewport grows (600px and 900px), the card’s size changes, and the font and background color also adapt.

CSS for Container Queries:

The container queries work similarly, but instead of responding to the viewport width, they react to the size of the card’s container. The container adjusts based on available space, triggering different styles when it reaches 500px and 800px.

Adding Output for different screen size :

Conclusion

Container queries bring a new level of flexibility to responsive design. They allow us to build more modular, reusable components that can respond to changes in their immediate environment. With growing browser support, now is the perfect time to start exploring container queries and incorporating them into your projects.

For an in-depth look, the Mozilla Developer Network (MDN) provides a comprehensive overview of Container Queries which includes syntax, use cases, and browser support information should you need it.