Subgrid & Container Queries
Subgrid and container queries are the newest CSS Grid features. Subgrid lets nested grids align to the parent grid's tracks. Container queries let components respond to their container's size instead of the viewport.
Subgrid & Container Queries
- Subgrid - grid-template-columns: subgrid. Nested grid inherits parent's column tracks
- Subgrid use case - Card headers and footers align across a row of cards, even with different content heights
- Container queries - @container (min-width: 400px) { ... }. Style based on PARENT width, not viewport
- container-type: inline-size - Declares an element as a query container
- Component-level responsive - A card shows horizontal layout in wide sidebar, vertical in narrow sidebar
- Container units - cqi, cqb (container query inline/block). Size relative to container, not viewport
- Browser support - Subgrid and container queries supported in all modern browsers since 2023
Subgrid & Container Queries Code
/* Subgrid: align card headers across row */
.card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.card {
display: grid;
grid-template-rows: subgrid; /* Inherit parent's row tracks */
grid-row: span 3; /* Header + body + footer */
}
/* All card headers align, all footers align - regardless of content */
/* Container queries */
.card-container {
container-type: inline-size;
container-name: card;
}
@container card (min-width: 400px) {
.card {
display: flex;
gap: 16px; /* Horizontal layout in wide container */
}
.card img { width: 150px; }
}
@container card (max-width: 399px) {
.card {
/* Vertical layout in narrow container */
}
.card img { width: 100%; }
}Tip
Container queries are the future of component-based CSS. Instead of thinking 'how does this look at 768px viewport?', think 'how does this look when its container is 400px wide?' This mental shift makes components truly portable and reusable across different layout contexts.
Mobile-first: start with mobile styles, enhance with min-width queries
Common Mistake
Applying container queries without first declaring container-type: inline-size on the parent. Without the container declaration, @container rules have nothing to query and are silently ignored. Always pair @container styles with a container-type on the target's parent element.
Practice Task
Implement a container-query card: (1) Wrap a card in a div with container-type: inline-size, (2) Default: vertical layout (flex-direction: column), (3) @container (min-width: 400px): horizontal layout (flex-direction: row) with a fixed-width image. Place this card in both a narrow and wide column to see it adapt.
Quick Quiz
Key Takeaways
- Subgrid and container queries are the newest CSS Grid features.
- Subgrid - grid-template-columns: subgrid. Nested grid inherits parent's column tracks
- Subgrid use case - Card headers and footers align across a row of cards, even with different content heights
- Container queries - @container (min-width: 400px) { ... }. Style based on PARENT width, not viewport