CSS Grid: nested grid

Hello. In today's article, I want to talk about nested grids. I will show you how to create grids inside the grid which can be very helpful in creating complex layouts. Let’s get started.

This article is part of my CSS Grid introduction series. If you want to check out my previous posts, here you can find the whole table of contents.

Nested grid.

In my previous article, I talked about grid items. It’s important to remember that any content inside a grid item is by default positioned according to normal flow. You can change that, and one of the methods is to define a given grid item as a nested grid container.

The way to create a nested grid is similar to creating a regular grid. To define a new nested grid you have to use the same display: grid property and grid track properties inside the grid item CSS rule.

<div class="container">
  <div class="grid-item nested-grid">
  </div>
</div>
.container {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);
}
.grid-item.nested-grid {
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  grid-template-columns: repeat(4, 1fr);
}