Media queries respond to the viewport. Container queries respond to the parent container. This changes everything for component-based design.
The Problem with Media Queries
A card component in a sidebar should look different from the same card in a main content area. Media queries can't distinguish — they only know the viewport width.
Container Queries Syntax
/* Define a containment context */
.card-container {
container-type: inline-size;
container-name: card;
}
/* Style based on container width */
@container card (min-width: 400px) {
.card {
display: grid;
grid-template-columns: 200px 1fr;
}
}
@container card (max-width: 399px) {
.card {
display: flex;
flex-direction: column;
}
}Container Query Units
.card-title {
/* cqw = 1% of container width */
font-size: clamp(1rem, 3cqw, 1.5rem);
}
/* Available units: cqw, cqh, cqi, cqb, cqmin, cqmax */Practical Example: Responsive Card
.widget-area {
container-type: inline-size;
}
@container (min-width: 600px) {
.product-card {
flex-direction: row;
.product-image { width: 40%; }
.product-info { width: 60%; }
}
}
@container (min-width: 300px) and (max-width: 599px) {
.product-card {
flex-direction: column;
.product-image { aspect-ratio: 16/9; }
}
}Style Queries (Experimental)
/* Query custom property values */
@container style(--theme: dark) {
.card { background: #1a1a1a; }
}Browser Support and Fallbacks
Container queries are supported in all modern browsers (Chrome 105+, Firefox 110+, Safari 16+). Use @supports (container-type: inline-size) for progressive enhancement.