Introduction

Responsive web design has traditionally relied on media queries to adapt layouts for different screen sizes. While media queries work well for page-level responsiveness, they have one major limitation—they respond to the viewport size, not the size of individual components.

As modern applications increasingly use reusable UI components, developers need a way for each component to adapt based on the space available to it, regardless of the overall screen size.

CSS Container Queries solve this problem. Instead of checking the browser's width, they allow a component to change its layout based on the size of its parent container. This makes components more flexible, reusable, and easier to integrate into different layouts.

In this article, you'll learn what Container Queries are, how they work, and how to use them to build truly responsive web components.

What Are CSS Container Queries?

Container Queries allow CSS rules to be applied based on the dimensions of a container rather than the viewport.

For example, consider a product card that appears in:

With media queries, the component behaves based on the browser size. With Container Queries, it responds to the width of its own container, making it reusable in different layouts without additional CSS.

Media Queries vs Container Queries

Understanding the difference helps determine when to use each approach.

FeatureMedia QueriesContainer Queries
Responds ToViewport sizeParent container size
Best ForOverall page layoutIndividual components
ReusabilityLowerHigher
Component IndependenceLimitedExcellent

Media queries and container queries can be used together to build fully responsive applications.

Creating a Container

Before using a container query, define an element as a container.

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

The container-type property tells the browser that child elements can respond to this container's size.

Writing a Container Query

Once a container is defined, create rules that apply when the container reaches a specific width.

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

In this example, the product card switches to a horizontal layout when its container is at least 500 pixels wide.

Practical Example

Consider a simple product card.

<div class="product-container">
    <div class="product-card">
        <img src="laptop.jpg" alt="Laptop">
        <div>
            <h2>Laptop</h2>
            <p>High-performance laptop.</p>
        </div>
    </div>
</div>

If the card is placed inside a narrow sidebar, it can display vertically. If it's placed inside a wider content area, it can automatically switch to a horizontal layout—all without changing the HTML.

Why Container Queries Are Useful

Container Queries provide several advantages:

These benefits make them particularly useful in component-based frameworks such as React, Angular, Vue, and Blazor.

Common Use Cases

Container Queries work well for many UI components, including:

Any component that may appear in different layouts can benefit from container-based responsiveness.

Performance Considerations

Container Queries are designed to be efficient, but good CSS practices remain important.

To maintain performance:

Well-structured CSS improves both maintainability and rendering performance.

Combining Media Queries and Container Queries

Container Queries are not a replacement for Media Queries.

Instead, use each for its intended purpose.

Use Media Queries for:

Use Container Queries for:

Using both together results in more adaptable and maintainable responsive designs.

Best Practices

When working with CSS Container Queries, follow these recommendations:

Conclusion

CSS Container Queries represent a significant improvement in responsive web design by allowing components to adapt based on the size of their parent container rather than the browser window. This approach makes UI components more reusable, flexible, and easier to maintain across different layouts.

By combining Container Queries with traditional Media Queries, developers can create responsive applications that work well on a wide range of devices while keeping component styles independent and scalable. As component-based development continues to grow, Container Queries are becoming an essential tool for building modern, maintainable web interfaces.