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 their parent container. This makes it easier to build truly flexible designs without relying on global breakpoints.

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 parent 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-widget {  container-type: inline-size;}@container (min-width: 250px) {  .sidebar-widget {    padding: 1.5rem;  }}

In this way we can ensure the widget adjusts padding dynamically, based on available space rather than viewport width.

How to Use Container Queries Today

Browser Support

Support for container queries is still a little patchy, but is getting better all the time:

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

So realistically, support is only reliable in browsers released during or after 2022, which likely means that most browser support matrices will include browsers that do not support container queries.

Adding Fallbacks

For browsers that do not support container queries, we can provide fallback styles using media queries, like this:

.card {  font-size: 1rem;}@media (min-width: 600px) {  .card {    font-size: 1.2rem;  }}@supports (container-type: inline-size) {  @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 their parent'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.