A Grid In A Grid

You want to nest grid in grid with the same definition of columns & gaps? Something like a sub grid which is inheriting the definitions? But you don't know how? No worries! Here are some possible solutions.

Preface

CSS Grid. Is. Not. Easy.
If you haven't understood it completely yet, that's totally fine. Here are some awesome resources which may you help understanding grid better:

• CSS Tricks Complete Guide to Grid
• Tutorial page by Rachel Andrew

How To - Step By Step

Step 1: Let us define an "example grid"

Lets say we have a grid of 16 columns with a gap of 16px. We will name it my-grid and the child elements cell.

We also want to define an area which is a few columns wide. E.g. ten columns -> cell-10.

.my-grid {
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    grid-column-gap: 16px;
}

Now we want to nest elements. For example we want to have cell children in our wide area cell-10. We don't want to loose the my-grid definitions. But how can we solve that?

Step 2: Nesting Without Loosing The Parent Definition

There are different solutions for different problems:

• ignoring the element CSSwise
• using subgrid
• grid in a grid

We will start with having a wrapper which is ignored by CSS.

Ignoring An Element CSSwise

We can tell CSS that a HTML Element is not existing for styling by using display.
display: contents elements doesn't create a box themselves. They are replaced by a pseudo box and their child boxes. If you like you could also say display: contents is telling the browser that there is now DOM-Element 😉

.this-is-not-the-element-your-are-looking-for {
    display: contents;
}

You may ask, why the heck should I have a HTML element that I don't need? There could be a several of reasons. One could be that a framework needs this wrapper element and you can't avoid it.

Creating A Sub Grid

If we want to create a real sub grid, which is inheriting the grid definition from our parent grid we need to use subgrid_.

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

Sadly subgrid doesn't has a good browser support yet.

But what if we want to support at least the current browsers?

A Grid In A Grid

To support the current browsers we need to define a grid which fits to the parent column element. We will use the cell-10 column to test it. Therefore we put in a new element and create a new class which we call my-inline-grid-10. The new grid will get a template column definition with the same amount of columns that the parent column is wide. In our case 10.

.my-inline-grid-10 {
    grid-template-columns: repeat(10, 1fr);
}

Now we can put in new cell*s which have the same width as the other columns, of our 16 column grid.
Of course we want to have the same grid gap as well. That's why we put *my-grid to the same HTML element. Also we have to make sure that class is defined AFTER my-grid in our CSS file to overwrite the template definition.

Conclusions

As we already said: CSS Grid. Is. Not. Easy. and if you haven't understood it completely yet, that's totally fine.
I hope that this short how-to may helped you to learn how to nest a CSS grid in a grid.

If you like visual examples, here is my CodePen that includes all examples from above:

!important always check the browser support

You have another solution, questions or feedback? Would be awesome if you leave a comment 🖤