DEV Community

Cover image for Container Queries: The CSS Feature I Wish I Had Years Ago
Muhammad Medhat
Muhammad Medhat

Posted on

Container Queries: The CSS Feature I Wish I Had Years Ago

#webdev #frontend #css #html

Introduction

For years, responsive design meant one thing:

@media (max-width: 768px) {
    ...
}
Enter fullscreen mode Exit fullscreen mode

Media queries work great when you want to adapt a layout based on the viewport size.

But what if a component lives inside a narrow sidebar on a large screen?

Or inside a wide content area on a tablet?

That's where Container Queries shine.

The Problem With Media Queries

Imagine a card component:

<div class="card">
    ...
</div>
Enter fullscreen mode Exit fullscreen mode

You want the card to switch layouts when it becomes too narrow.

With media queries, you're forced to react to the viewport:

@media (max-width: 768px) {
    .card {
        flex-direction: column;
    }
}
Enter fullscreen mode Exit fullscreen mode

The problem?

The viewport may be large while the card's container is small.

The component doesn't actually know how much space it has available.

Enter Container Queries

Container Queries allow a component to respond to the size of its parent container rather than the viewport.

First, define a container:

.cards-wrapper {
    container-type: inline-size;
}
Enter fullscreen mode Exit fullscreen mode

Then create queries based on that container:

@container (max-width: 500px) {
    .card {
        flex-direction: column;
    }
}
Enter fullscreen mode Exit fullscreen mode

Now the card adapts based on the space it actually has.

A Real Example

Imagine a product card:

<div class="products">
    <article class="product-card">
        <img src="product.jpg" alt="">
        <div class="content">
            <h3>Product Name</h3>
            <p>Description</p>
        </div>
    </article>
</div>
Enter fullscreen mode Exit fullscreen mode

Default layout:

.product-card {
    display: flex;
    gap: 1rem;
}
Enter fullscreen mode Exit fullscreen mode

Make the parent a container:

.products {
    container-type: inline-size;
}
Enter fullscreen mode Exit fullscreen mode

Change layout when space becomes limited:

@container (max-width: 450px) {
    .product-card {
        flex-direction: column;
    }
}
Enter fullscreen mode Exit fullscreen mode

The card becomes fully reusable regardless of where it's placed.

When I Use Container Queries

I find them most useful for reusable components like:

  • Product cards
  • Team member cards
  • Dashboard widgets
  • Pricing tables
  • Sidebar blocks
  • Custom WordPress blocks

Instead of designing around the page, you design around the component itself.

Container Queries vs Media Queries

Use Media Queries when:

  • Adjusting page layouts
  • Changing navigation behavior
  • Responding to viewport size

Use Container Queries when:

  • Building reusable components
  • Creating modular UI systems
  • Designing components that appear in different layouts

I don't see them as competitors.

They solve different problems and often work together.

Browser Support

Container Queries are now supported in all modern browsers, making them practical for production projects.

Always verify support requirements if you're targeting older browsers, but for most modern projects they're ready to use.

Final Thoughts

Container Queries changed the way I think about responsive design.

Instead of asking:

"How wide is the screen?"

I can ask:

"How much space does this component actually have?"

That small shift makes components more reusable, predictable, and easier to maintain.

If you're still relying only on media queries, Container Queries are definitely worth adding to your CSS toolbox.

Top comments (0)