CSS
CSS Grid: Perfect Alignment with `subgrid` for Nested Grids
Discover the power of CSS `subgrid` to achieve precise alignment of content within nested grid containers by inheriting parent grid tracks.
.parent-grid {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* 3 columns for main layout */
grid-template-rows: auto auto auto;
gap: 20px;
padding: 30px;
max-width: 900px;
margin: 50px auto;
border: 2px solid #5a0e6e;
border-radius: 8px;
background-color: #fdfdfd;
}
.parent-item {
background-color: #e0d0eb;
padding: 20px;
border-radius: 5px;
box-sizing: border-box;
text-align: center;
font-family: sans-serif;
}
.header-area {
grid-column: 1 / -1; /* Spans all columns */
background-color: #5a0e6e;
color: white;
padding: 15px;
font-size: 1.5em;
}
.footer-area {
grid-column: 1 / -1; /* Spans all columns */
background-color: #5a0e6e;
color: white;
padding: 10px;
font-size: 0.9em;
}
.card-list {
grid-column: 2 / 4; /* This list spans the middle two columns of the parent */
display: grid;
grid-template-columns: subgrid; /* Inherit parent's column tracks */
grid-template-rows: repeat(2, min-content); /* Two rows, content-sized */
gap: 15px; /* Gap between cards */
background-color: #f0f0f0;
padding: 15px;
border-radius: 5px;
}
.card {
/*
* Cards will align perfectly with the parent's tracks even though
* their container (`.card-list`) only spans 2 parent columns.
* The `subgrid` value makes the `.card-list` children respect the
* `parent-grid`'s column definition for `2fr 1fr` rather than
* defining new columns itself.
*/
background-color: white;
border: 1px solid #ddd;
border-radius: 5px;
padding: 15px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
font-size: 0.9em;
text-align: left;
}
.card h3 {
margin-top: 0;
color: #5a0e6e;
}
/* Specific placement for cards within the subgrid */
.card-1 {
grid-column: 2; /* Placed in the parent's 2nd column track */
}
.card-2 {
grid-column: 3; /* Placed in the parent's 3rd column track */
}
.card-3 {
grid-column: 2 / span 2; /* Spans parent's 2nd and 3rd column tracks */
}
body { margin: 0; font-family: sans-serif; background-color: #f4f4f4; }
/* HTML Structure */
/*
<div class="parent-grid">
<div class="parent-item header-area">Page Header</div>
<div class="parent-item">
<h2>Sidebar</h2>
<p>Content for the left sidebar.</p>
<p>This item is placed in the first column of the parent grid.</p>
</div>
<div class="card-list">
<div class="card card-1">
<h3>Card One</h3>
<p>Aligned with the second parent grid column.</p>
</div>
<div class="card card-2">
<h3>Card Two</h3>
<p>Aligned with the third parent grid column.</p>
</div>
<div class="card card-3">
<h3>Card Three</h3>
<p>This card spans both the second and third parent grid columns, thanks to subgrid.</p>
</div>
</div>
<div class="parent-item footer-area">Page Footer</div>
</div>
*/
How it works: This snippet showcases the powerful `subgrid` feature for CSS Grid, which enables a nested grid to inherit its parent's grid tracks. The `.parent-grid` establishes a main layout with three columns (`1fr 2fr 1fr`). One of its children, `.card-list`, is also set to `display: grid`. Instead of defining its own columns, it uses `grid-template-columns: subgrid;`. This means the columns within `.card-list` are not new, but rather references to the columns defined by `.parent-grid`. When `.card-list` itself spans `grid-column: 2 / 4` (i.e., the second and third parent columns), its children (`.card` elements) can then be placed directly into those inherited tracks (e.g., `grid-column: 2` or `grid-column: 3`), ensuring perfect alignment with elements in the parent grid, even across different nesting levels. This solves common alignment challenges in complex layouts.