Container Queries Deep Dive
Container queries let components respond to their CONTAINER's size instead of the viewport. A card component can display differently in a narrow sidebar vs a wide main area - making truly reusable, context-aware components. This is the biggest CSS advancement since Flexbox.
Container Queries
- container-type: inline-size - Declares an element as a size query container
- container-name: card - Names the container for targeted queries
- @container (min-width: 400px) - Apply styles when the container is at least 400px wide
- @container card (min-width: 500px) - Query a specific named container
- Container units - cqi (1% of container inline size), cqb (1% of container block size)
- Component-level responsive - Same card component looks different in sidebar vs main content area
- vs Media queries - Media queries check viewport. Container queries check the nearest container ancestor
Container Queries Code
/* Define a container */
.card-wrapper {
container-type: inline-size;
container-name: card;
}
/* Default: vertical card (narrow container) */
.card {
display: flex;
flex-direction: column;
}
.card img {
width: 100%;
aspect-ratio: 16/9;
object-fit: cover;
}
/* Wide container: horizontal card */
@container card (min-width: 500px) {
.card {
flex-direction: row;
gap: 20px;
}
.card img {
width: 200px;
aspect-ratio: 1;
border-radius: 12px;
}
}
/* Use container units */
.card-title {
font-size: clamp(1rem, 3cqi, 1.5rem); /* Scale with container */
}
/* Feature: same component, different contexts */
.sidebar .card-wrapper { /* Narrow → vertical card */ }
.main .card-wrapper { /* Wide → horizontal card */ }
/* NO different CSS needed - the container query handles it! */Tip
Container queries make components truly portable. A card in a narrow sidebar shows compact layout; the same card in a wide main area shows expanded layout - no code changes needed. Think in components, not viewport breakpoints.
Mobile-first: start with mobile styles, enhance with min-width queries
Common Mistake
Forgetting container-type: inline-size on the parent element. Without this declaration, @container rules have nothing to query and are silently ignored. Always declare the container before writing @container queries.
Practice Task
Build a container-responsive card: (1) Wrap card in div with container-type: inline-size, (2) Default: vertical flex layout, (3) @container (min-width: 500px): horizontal flex layout with fixed-width image, (4) Place in both narrow sidebar and wide main to verify.
Quick Quiz
Key Takeaways
- Container queries let components respond to their CONTAINER's size instead of the viewport.
- container-type: inline-size - Declares an element as a size query container
- container-name: card - Names the container for targeted queries
- @container (min-width: 400px) - Apply styles when the container is at least 400px wide