A Grid In A Grid
Tags: css, html, tutorial, webdev
Published: 2020-10-28 13:30:49

---
title: A Grid In A Grid
published: true
description: You want to nest grid in grid with the same definition of columns & gaps?
tags: 'css, html, tutorial, webdev'
cover_image: https://raw.githubusercontent.com/sinnerschrader/s2engineers-content/main/posts/feli/assets/grid.png
canonical_url: null
id: 500119
author: FELI
organization_id: 2029
---

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](https://css-tricks.com/snippets/css/complete-guide-grid/)
* [Tutorial page](https://gridbyexample.com/) 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*.

```css
.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 😉

```css
.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___.

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

Sadly __subgrid__ doesn't has a good [browser support](https://caniuse.com/css-subgrid) 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.

```css
.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:
{% codepen https://codepen.io/kotzendekrabbe/pen/jOqjqzE %}

*!important* always check the [browser support] (https://caniuse.com)

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