CSS
Aligned Nested Grids with CSS Subgrid
Leverage CSS Subgrid to create perfectly aligned content within nested grid containers, inheriting track sizes from the parent grid for consistent and robust complex layouts.
/* HTML Structure Example: */
/*
<div class="parent-grid">
<div class="grid-item-1">Parent Grid Item 1</div>
<div class="grid-item-2">
<h3>Nested Content Header</h3>
<div class="subgrid-container">
<p class="subgrid-item">Subgrid Col 1</p>
<p class="subgrid-item">Subgrid Col 2</p>
<p class="subgrid-item">Subgrid Col 3</p>
</div>
</div>
<div class="grid-item-3">Parent Grid Item 3</div>
</div>
*/
.parent-grid {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* Parent defines 3 columns */
gap: 1em;
padding: 1em;
border: 2px solid #333;
}
.grid-item-1, .grid-item-2, .grid-item-3 {
background-color: #f0f0f0;
padding: 1em;
border: 1px solid #ccc;
}
.grid-item-2 {
/* Span this item across the parent grid to contain its own subgrid */
grid-column: 2 / span 1; /* Or just 2 / 3 for specific column */
}
.subgrid-container {
display: grid;
/* subgrid allows child grid to use parent's column definitions */
grid-template-columns: subgrid;
/* Crucial: tell the subgrid container which parent grid columns it should span */
grid-column: 1 / -1; /* Span across all available columns of the PARENT grid-item-2 */
gap: 0.5em;
margin-top: 1em; /* Spacing from the header */
}
.subgrid-item {
background-color: #e6e6fa;
padding: 0.5em;
border: 1px dashed #999;
text-align: center;
}
How it works: This snippet demonstrates the use of CSS Subgrid to achieve perfect alignment in nested grid layouts. The `parent-grid` defines its own column tracks. A child element, `.subgrid-container`, then uses `display: grid` and `grid-template-columns: subgrid` to tell it to inherit the track sizing from its direct parent's grid definition. By setting `grid-column: 1 / -1` on the subgrid container, it spans across all the parent's columns, allowing its own children (`.subgrid-item`) to align precisely with the parent grid's tracks, creating complex, robustly aligned layouts.