Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
Child grid items use parent's column or row track sizing automatically
Content aligns perfectly across parent and child grids
No complex calculations or JavaScript needed for alignment
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Subgrid - Basic Example</title>
</head>
<body>
<div class="container">
<h1>📐 CSS Subgrid</h1>
<p class="subtitle">Inherit grid tracks from parent grid for perfect alignment</p>
<div class="label">Parent Grid (3 columns)</div>
<div class="parent-grid">
<div class="subgrid-child">
<div class="item">Column 1<br>Aligned</div>
<div class="item">Column 2<br>Aligned</div>
<div class="item">Column 3<br>Aligned</div>
</div>
</div>
<div class="info-box">
<div class="info-title">✨ How Subgrid Works</div>
<p class="info-text">
The child element uses <code>grid-template-columns: subgrid</code> to inherit
the parent's 3-column grid tracks. This ensures perfect alignment across nested grids!
</p>
</div>
</div>
</body>
</html>Loading preview...
grid-template-columns: subgrid;display: grid;Child must be a grid container
grid-column: span 3;Span parent columns to inherit
Horizontal alignment - perfect for card grids, navigation menus, product listings
grid-template-rows: subgrid;display: grid;Child must be a grid container
grid-row: span 3;Span parent rows to inherit
Vertical alignment - great for card layouts where titles, content, and footers align
.parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}.child {
display: grid;
grid-template-columns: subgrid; /* Inherits 3 columns */
grid-column: span 3; /* Spans all 3 columns */
gap: 20px;
}Align card footers across different content lengths. Perfect for product cards, blog posts, and feature showcases.
Align labels and inputs in nested fieldsets. Great for complex forms with consistent alignment.
Create complex aligned structures that behave like tables but with more flexibility and semantics.
Maintain grid alignment across component boundaries in modern component-based architectures.
For older browsers, use @supports (grid-template-columns: subgrid) to provide fallback layouts. Most users on modern browsers will see the enhanced subgrid version!