Container Queries
Container queries apply styles based on the size of the element's parent container, not the viewport. This enables truly reusable, self-contained components.
Supported in all modern browsers since 2023.
HTML
Advanced
6 min read
CSS Container Queries
Example
.card-wrapper {
container-type: inline-size;
container-name: card;
}
/* Styles apply when the card container is at least 400px wide */
@container card (min-width: 400px) {
.card {
display: flex;
gap: 1rem;
}
} Pro Tip
Container queries replace viewport-based media queries for component-level responsiveness — no more context-specific CSS overrides.