Intermediate LevelCSS & Modern Layouts
What is CSS Subgrid and how does it enable nested grid alignment?
❓ Interview Prompt: Explain the subgrid value, how child grids inherit parent track definitions, and alignment use cases.
Subgrid allows a nested grid item to adopt the track definitions (columns, rows, or both) of its parent grid instead of defining its own.
The Problem Without Subgrid:
When cards are placed in a grid, content inside each card (title, body, footer) cannot align across cards because each card has its own independent internal layout.
Subgrid Solution:
grid-template-rows: subgrid on a grid child makes its internal rows inherit the parent grid's row tracks, aligning content across siblings.
Browser Support:
Supported in all major browsers since 2023.
Code Implementation Example
css
.card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.card {
display: grid;
/* Inherit parent's row tracks for cross-card alignment */
grid-template-rows: subgrid;
grid-row: span 3; /* Card spans 3 parent rows */
}
/* Title, body, footer align perfectly across all cards */
.card-title { /* Row 1 */ }
.card-body { /* Row 2 */ }
.card-footer { /* Row 3 */ }💡Subgrid aligning card titles, bodies, and footers across columns.
🎯 Interview Key Takeaway
Subgrid solves cross-component alignment by letting nested grids inherit parent track definitions.
#Subgrid#Grid#Alignment#Intermediate
Back to all CSS & Modern Layouts Questions→