Academy / Advanced Level: HTML and CSS

CSS Grid Advanced Features

Nested Grids for Complex Layouts

Nested grids allow you to create a grid inside another grid, providing more control over individual sections of a webpage.

Example:

<div class="parent-grid">
  <div class="nested-grid">
    <div class="nested-item">Item 1</div>
    <div class="nested-item">Item 2</div>
  </div>
</div>

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

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

In this example:

• The parent-grid is the main grid layout.
• Inside one of the grid items, we have a nested grid to manage sub-layouts.