Introduction

In the world of responsive web design, media queries have long been the go-to tool for ensuring that websites look great on every screen. But as web design evolves, so do the tools we use. Enter container queries a game changer for developers who want more precise control over how individual elements on a page respond to their surrounding context.

No more relying solely on screen sizes! With container queries, you can now style elements based on the size of their parent containers, allowing for more dynamic and flexible designs. In this article, we’ll explore how container queries work, why they’re a powerful alternative to media queries, and how you can start using them to build smarter, more adaptive websites.

Media Queries and Their Limitations

In modern web development, the first rule of your website has to be responsive, and mobile friendly. So, web developers, heavily rely on media queries. Media queries are typically used to make small adjustments to the layout and design of a website based on screen size, resolution, or other device characteristics.

Global screen-based approach: Media queries only respond to the viewport size (screen width/height) and don't account for the individual layout needs of specific elements within the page.

Breakpoints complexity: Developers often struggle with defining breakpoints that work well across all devices and content layouts.

Container Queries

Now, web developers have another option called Container queries. The container queries are used to style a website based on the size and layout of specific elements on the page. For example, if a container has less space available in the surrounding context, you can hide certain elements or use smaller fonts.

Element-based responsiveness: Unlike media queries, which focus on the screen size, container queries allow elements to adapt to their own parent container's size.

Avoiding layout inconsistencies: With container queries, elements can adjust based on their context, preventing breakpoints from breaking the design in unexpected ways when the same component is used in different sections of the site.

A container query is an alternative to a media query. But, they both work differently.

Let’s see how to define a container query.

Firstly, we have to declare a container context on an element. To do this, use container-type property and its value could be size, inline-size, or normal

Size: The query will be based on the inline and block dimensions of the element.

Inline-size: The query will be based on the inline dimensions of the element.

Normal: The element is not a query container for any container size but, it still remains a query container for container-style queries.

Let’s see an example of how to use them in the code.

We have a section that contains some articles.

<section class="all-articles">
  <articles class="articles">
    <section class="section">
      <h3>Article title one</h3>
      <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
    </section>
    <section class="section">
      <h3>Article title two</h3>
      <p>It is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
    </section>
  </articles>
</section>

.all-articles {
  container-type: inline-size; 
}

.section {
  font-size: 1rem;
  line-height: 1.6rem;
}

@container (min-width: 700px) {
  .articles {
     display: flex;
     max-width: 90rem;
     margin: 0 auto;
  }
}

@container (min-width: 900px) {
  .section {
    font-size: 1.8rem;
    max-width: 50rem;
    line-height: 2.4rem;
  }
}

Live code pen example for the above code. Please modify the container-types with other properties.

When to Use Container Queries vs. Media Queries

Component-based systems: If you're working with reusable components or in design systems, container queries allow components to behave responsively without relying on global media queries.

Dynamic layouts: Pages with dynamic grids or nested containers benefit from container queries, which allow flexibility based on the parent container's size.

However, media queries are still useful for layout-level adjustments, so it's important to use both approaches strategically.

Conclusion

When deciding whether to use media queries or container queries, it’s important to consider your goals for the responsive design and the type of changes you want to have it on your website.

Media queries are generally easier to implement. You can use it for trival adjustments, and in other hand container queries offer more flexibility and can be used for more significant changes.

🚀 Stay Ahead of Web Design Trends!
Unlock insider tips, tutorials, and the latest in web development directly in your inbox. Whether you're diving into container queries or exploring new tools, our newsletter will keep you updated and ahead of the curve.

💡 Subscribe now and take your web design skills to the next level!