🧱 Nested Grid — Creating Grids Inside Grids in CSS

🌐 What is a Nested Grid?

A nested grid is when a grid item itself becomes a grid container. This allows you to build complex layouts by placing grids inside other grids. Each nested grid behaves independently unless you choose to connect it using subgrid.

>>“Nested grids give you multi-level layout control — like building UI with Lego blocks.”

🎯 Why Use Nested Grids?

  • To organize complex UI components (cards, dashboards, forms)
  • To structure content inside a grid item (headers, sidebars, thumbnails)
  • Create modular, reusable components with inner layouts
  • Achieve precise control that flexbox or a single grid alone can't handle

📌 Basic Concept

1️⃣ Parent element → display: grid;
2️⃣ Child grid item → also becomes display: grid;

Basic Nested Grid

.parent {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.child {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

📐 Visual Structure

Media content

🧪 Example: Card Component With Nested Grid

Card Layout Using Nested Grid

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

.card {
  display: grid;
  grid-template-rows: 150px auto 50px;
}

.card-header {
  background: #ccc;
}

.card-body {
  padding: 15px;
}

.card-footer {
  background: #eee;
}

Each card is a nested grid with its own rows. The parent controls card placement; the card controls internal content structure.

🔥 Example: Dashboard With Multiple Nested Grids

Dashboard Layout

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

.stats,
.activity {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.stat-box,
.activity-item {
  background: #f1f1f1;
  padding: 10px;
}

Both .stats and .activity are nested grids within the dashboard layout.

🧱 Nested Grid vs Subgrid

FeatureNested GridSubgrid
ControlIndependent tracks inside each gridInherits parent grid tracks
AlignmentCan misalign with parentPerfect alignment with parent
Use CaseModular layout componentsConsistent alignment across nested children

Note

💡 Use nested grids for independent layouts. Use subgrid when alignment with parent matters.

📱 Responsive Nested Grid Example

Responsive Nested Grid

.profile {
  display: grid;
  grid-template-columns: 1fr;
}

.profile-info {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

@media (max-width: 600px) {
  .profile-info {
    grid-template-columns: 1fr;
  }
}

Each grid controls its own responsive behavior while still living inside a parent grid.

⚠️ Common Mistakes

  • Not defining display: grid on nested grid containers
  • Expecting nested items to align with parent grid lines (use subgrid instead)
  • Overusing nested grids for layouts that could be simpler
  • Mixing grid and flexbox unnecessarily inside nested structures

Note

🧠 Rule of thumb:
If you need structured placement → grid.
If you need directional flow → flexbox.

🔥 Summary

Nested grids allow you to build multi-layered, modular, and powerful layouts in CSS Grid. Use them to structure components internally while keeping the parent layout clean and flexible.

>>“Nested grids let you compose layouts from the inside out — powerful, modular, flexible.”

Learn more →MDN Docs 📘