Nested container queries
Use container queries inside other container queries to create components that respond independently to their own local context at every nesting level.
Drag the bottom-right corner of the box to resize and watch both levels adapt independently.
Quick implementation
/* Outer container */
.outer-cq {
container-type: inline-size;
container-name: outer;
}
.outer-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
@container outer (min-width: 36rem) {
.outer-grid {
grid-template-columns: 1fr 1fr;
}
}
/* Inner container (each card) */
.inner-cq {
container-type: inline-size;
container-name: card;
}
.inner-card {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 1rem;
background: var(--card);
border-radius: var(--radius);
}
@container card (min-width: 16rem) {
.inner-card {
flex-direction: row;
align-items: center;
}
}Prompt this to your LLM
Includes role, constraints, two framework variants, and edge cases to handle.
You are a senior frontend engineer building nested container query layouts.
Goal: An outer container that switches its grid from 1 column to 2 columns
at a wide container width, with inner card components that independently
switch their internal layout at a separate, smaller threshold.
Technical constraints:
- Apply container-type: inline-size and container-name: outer to the outer
wrapper.
- Apply container-type: inline-size and container-name: card to each inner
card wrapper.
- Use @container outer (min-width: 36rem) to switch the outer grid to two
columns.
- Use @container card (min-width: 16rem) to switch each inner card to
flex-direction: row.
- Use oklch() for all color values.
- Do not use media queries — only @container queries.
Framework variant (pick one):
A) Vanilla CSS utility classes — .outer-cq, .outer-grid, .inner-cq, and
.inner-card.
B) React component — renders an outer grid wrapper and a reusable InnerCard
component; each applies container-type via CSS Modules.
Edge cases to handle:
- If an inner card is placed directly in the outer container without the
inner-cq wrapper, the @container card query should not fire — ensure the
inner containment boundary is always present.
- When deeply nesting beyond two levels, assign a unique container-name at
every level and reference the correct name in each @container rule.
Return CSS only (or React components if variant B).Why
Nested container queries let you build truly component-driven designs where each piece of UI adapts to its own context independently. The outer grid responds to the page layout context; each inner card responds to the column width it is placed in. This produces smooth, correct layouts at every nesting level.
The logic
Each container-type: inline-size declaration creates an independent containment boundary. The container-name property gives each boundary a unique name so @container outer (...) and @container card (...) can target the correct ancestor. The outer grid switches to two columns at 36rem; each inner card, now narrower, switches to a row only when its own column reaches 16rem.
Accessibility & performance
Container queries have no runtime cost — they are evaluated during CSS layout, the same as media queries. Use container-name consistently to avoid ambiguous query resolution in deeply nested structures.