CSS subgrid vs. nested grid: how are they different and why do we need a subgrid?

There has been a lot of discussion for a while now about the use of subgrid, and even whether we even need it because approaches such as nested grids and display: inherit can handle some of its problems. But not all. For this reason, this article will focus on getting to know subgrid and nested grid more in detail – we will get to know what are similarities and what are the CSS subgrid vs. nested grid differences.

What is a nested grid?

Any grid item can become a grid: we nest a grid by making a grid item a grid container. When we want to create a nested grid, we have to define display: grid to the grid item (and then define rows and columns), and this way that grid item becomes a grid container. In the example below we created a nested grid by defining display: grid to the my-inner-grid item, like so:

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

What are issues with a nested grid layout?

The biggest problem with nested grids is that nested grids are independent of the parent grid and of each other. This basically means that they do not take their track sizing from the parent grid, which makes it more difficult to line nested grid items up with the main grid. The changes we make inside a nested grid do not reference the parent container for itself. So, after creating a nested grid, the nested grid becomes independent and we have to take care of two separate grids, which is not very efficient.
There is another problem connected to the nested grid and that one lies in its flexibility. Nested grids often created a problem with a responsive design where the inside element overflows outside the boundaries of the grid container element.

What is a subgrid?

The idea of applying grids inside another grid (aka nested grid) became quickly very popular even though the nested grid has some disadvantages. For this reason and to avoid the negative outcomes of a nested grid, CSS has enrolled a new feature called subgrid. Subgrids are very similar to nested grids but are more predictable and easier to manage. The subgrid is applied with the keyword “subgrid” in the CSS (display: subgrid).
It is important to bring out that at this very moment subgrid is used very poorly in web development – Firefox is the only browser to support subgrid value.

What is the biggest advantage of a subgrid?

The biggest advantage of subgrid is the inheritance of the parent-child relationship. A subgrid value enables us to enhance grid items with subgrids that inherit rows, columns, and lines from the parent grid and seamlessly align with it. Let’s take a look at a few examples.

Setting a subgrid on the row axis (x-axis)

If we take an example from the nested grid, setting a subgrid on the row axis would look like this:

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

.my-inner-grid {
    display: grid;
    grid-template-rows: subgrid;
}

Setting a subgrid on the column axis (y-axis)

For setting a subgrid on the column axis we need to set the grid-template-column property as a subgrid, like so:

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

.my-inner-grid {
    display: grid;
    grid-template-columns: subgrid;
}

Setting a subgrid on both dimensions – both row and column axis

We can create subgrids in both dimensions, and to do this we need to combine the above two codes into one code so it contains both grid-template-row and grid-template-columns property set to subgrid:

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

.my-inner-grid {
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid
}

A message to take home

A subgrid is a part of a grid – we only have one grid – and the subgrid gets included in the same layout — using the same rows, columns, and lines. A nested grid, on the other hand, is independent of the parent grid – we actually have two grids to manage. Yes, we can “hack” it and make the my-inner-grid take the computed value of the property from my-outer-grid with a keyword inherit and this way define that the nested grid will inherit both the row and column sizing from the parent grid, but the tracks of both inner and outer grid will still be independent of each other.