Did You Know About the Power of CSS Container Queries?

Welcome back! Today, let’s explore a revolutionary CSS feature that’s changing how we build responsive components: container queries.

What are Container Queries?

Traditionally, CSS media queries let us change styles based on the viewport size (the entire browser window). But what if you want a component to adapt to its container’s size, not the viewport? Enter container queries.

Instead of asking “How big is the window?”, you can now ask: “How big is this box right here?” — and style accordingly!

.card {
    container-type: inline-size;
}
 
@container (min-width: 400px) {
    .card-title {
        font-size: 2rem;
    }
}

Why Is This Awesome?

Let’s break it down:

Local responsiveness: Components adapt to their container, not the whole page.
Better design systems: Build truly reusable components that look great anywhere.
No more hacks: Forget workarounds like extra wrapper divs or JavaScript resize observers.

So, widgets, cards, or sidebars can intelligently change layout or style when they have more (or less) space, all by themselves!

When Would I Use Container Queries?

Reusable UI components:
You want your buttons, cards, or widgets to look good no matter where they live.
Dynamic grids:
Let grid items adapt when the grid grows or shrinks.
Complex layouts:
Sidebars or tool panels that should adjust spacing, font sizes, or orientation based on their own size.

Real-World Example

Imagine a product card that displays vertically when small but turns horizontal with larger space:

.product-card {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
}
 
@container (min-width: 600px) {
    .product-card {
        flex-direction: row;
    }
    .product-image {
        width: 300px;
    }
}

In a tight sidebar? Stacks vertically.
In a roomy page? Flips to a horizontal layout with a big image!

One More Fun Fact

Container queries aren’t limited just to width—you can use them for height and other container features, too. They’re already supported in all modern browsers, so you can start container-querying today!