Nested Grids

Nested Grids

A grid item can itself become a grid container. This lets you build complex, multi-level layouts where each section has its own grid structure.

Basic Nested Grid

<div class="outer-grid">
    <div class="item">Item 1</div>
    <div class="item inner-grid">
        <div>Nested 1</div>
        <div>Nested 2</div>
        <div>Nested 3</div>
    </div>
    <div class="item">Item 3</div>
</div>

.outer-grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 20px;
}

.inner-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

The .inner-grid is both a grid item (of the outer grid) and a grid container (for its own children). Each grid is independent — its own columns, rows, and gaps.

Practical Example: Card Grid

<div class="page-grid">
    <header>Header</header>
    <main class="card-grid">
        <div class="card">Card 1</div>
        <div class="card">Card 2</div>
        <div class="card">Card 3</div>
        <div class="card">Card 4</div>
    </main>
    <footer>Footer</footer>
</div>

.page-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    padding: 20px;
}

The page uses a single-column grid for the overall structure. Inside <main>, a nested grid handles the responsive card layout.

Key Takeaways

• Any grid item can also be a grid container by setting display: grid
• Nested grids are independent — they have their own columns, rows, and gaps
• Use nesting for layouts with different grid structures at different levels
• Common pattern: page-level grid + content-level grid for cards or galleries