Container Queries in CSS

For years, responsive design has relied on media queries, which work really well at adjusting elements based on the viewport width. Although this works well for overall layouts, it does not handle component‑level responsiveness at all, and that can be a bit of a pain, especially if you're working with design systems or component libraries where you might want a component to respond to the dimensions of its container, rather than the overall dimensions of the viewport.

This is where container queries come in. Instead of adjusting elements based on the entire screen, container queries allow components to adapt to the size of an eligible ancestor container. This makes it easier to build truly flexible designs without relying on global breakpoints. The nearest ancestor with the required containment context is used; it does not have to be the direct parent.

What are Container Queries?

Container queries let us apply styles based on the size of a container rather than the viewport. This allows components to adjust to their available space, making layouts more flexible and reusable.

Basic Syntax

To use container queries, we need to:

1. Define a container

   using container-type.

2. Write a query

   that applies styles based on the container's width.

.card-container {
  container-type: inline-size;
}

.card {
  background: lightblue;
  padding: 1rem;
}

@container (min-width: 300px) {
  .card {
    background: lightgreen;
  }
}

In this example, .card starts with a light blue background, but if its parent .card-container reaches 300px wide, the background changes to light green.

This works completely independently of the viewport size, which makes it much more adaptable.

How Container Queries Improve Responsive Design

Previously, we used media queries to control styles based on screen size. However, this approach has limitations.

The Problem with Media Queries

Media queries only react to the viewport, so components cannot adapt dynamically to their container. For example:

@media (min-width: 600px) {
  .card {
    font-size: 1.2rem;
  }
}

Regardless of whether a .card component appears in a sidebar and a full‑width layout, it will always use the same styles, even if it looks awkward.

The Container Query Solution

With container queries, we can scope styles to the component's size, rather than the viewport:

.card-container {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card {
    font-size: 1.2rem;
  }
}

Now, .card only increases font size when its nearest eligible query container is at least 400px wide, regardless of the viewport size.

Container queries do not replace media queries so much as sharpen where each one belongs. If you want to revisit that older tool properly, Understanding Media Queries in CSS is the right companion.

Practical Use Cases for Container Queries

Responsive Cards and Widgets

Cards that appear in both wide and narrow layouts can now adjust their styles accordingly. Like this:

.card-container {
  container-type: inline-size;
}

@container (min-width: 500px) {
  .card {
    display: flex;
  }
}

If .card-container expands beyond 500px, the .card switches to a flex layout, but remains stacked in smaller containers.

Component‑Based Design

Container queries make it easier to create truly reusable components. Instead of relying on page‑wide breakpoints, components define their own behaviour.

For example, a sidebar widget can adapt without needing global media queries:

.sidebar {
  container-type: inline-size;
}

@container (min-width: 250px) {
  .sidebar-widget {
    padding: 1.5rem;
  }
}

Place .sidebar-widget inside the .sidebar element that establishes containment. The widget then adjusts its padding when that ancestor reaches the query width. An element cannot use a size query to respond to its own dimensions.

How to Use Container Queries Today

Browser Support

Size container queries are supported in these browser versions and later:

• Chrome 105+
  Firefox 110+
  Edge 105+
  Safari 16+

These releases span 2022 and early 2023. Check the browser versions your project actually needs to support, rather than assuming every support matrix requires a fallback. If an older browser is in scope, give it a usable layout and enhance from there.

Adding Fallbacks

For browsers that do not support size container queries, we can keep a viewport‑based fallback. In supporting browsers, set up .card-container and reset .card to its smaller font size before applying the container rule. That stops a wide viewport from forcing the larger font onto a narrow card:

.card {
  font-size: 1rem;
}

@media (min-width: 600px) {
  .card {
    font-size: 1.2rem;
  }
}

@supports (container-type: inline-size) {
  .card-container {
    container-type: inline-size;
  }

  /* Undo the viewport fallback before querying the container. */
  .card {
    font-size: 1rem;
  }

  @container (min-width: 400px) {
    .card {
      font-size: 1.2rem;
    }
  }
}

Although it's not perfect, it does ensure that older browsers still get basic responsive behaviour.

Wrapping Up

Container queries make responsive design more flexible and component‑driven by allowing elements to adjust based on their container's size, rather than the entire viewport. This is a major shift from traditional media queries and opens up new possibilities for scalable, reusable layouts.

Key Takeaways

• Container queries allow elements to adapt

  based on an eligible ancestor container's size rather than the viewport.

• Unlike media queries

  , container queries enable more component‑based styling.

• They simplify responsive layouts

  , making UI elements more flexible and reusable.

• Modern browsers support container queries

  , but fallbacks are needed for older versions.

Container queries are changing the way we approach responsive design. They make it easier to create flexible, reusable components that adapt to different layouts.