CSS Container Queries vs Media Queries: When to Use Which

For over a decade, media queries were the foundation of responsive design. But in the age of modular components, CSS Container Queries offer a more precise solution.

Viewport vs. Parent Size

Media queries track the browser viewport width. Container queries track the size of the parent wrapper. This means a component changes its design based on the size of the section it resides in.

A Quick Container Query Code Example

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

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

Conclusion

Use media queries for macro-layouts like navigation bars and main page columns, and container queries for micro-layouts like reusable cards, widgets, and form elements.