Is it bad practice to nest CSS Grids?

Question

I'm experimenting with component driven front end frameworks, such as Angular, and finally learning CSS Grid.

My question is: is it bad practice to nest CSS Grids?

What I've done here is in my main/root component, I've used css grid to make two things: the navbar and the main content area, since navbar will be present in the entire app and also the main content.

As you can see below, the grid on the root level then another grid in the <nav-bar> component. And in the main content area, there will be many more, probably a grid in each/any Angular component I use.

**********************    ******************************
*       Navbar       * => * img | nav         | logout *
**********************    ******************************
**********************
*                    *
*       Content      *
*                    *
**********************

Example code below:

app.component.html

<div class="container">

    <div class="item-navbar"></div>

    <div class="item-nav">
        <nav-bar></nav-bar>
    </div>

    <div class="item-content">
        <router-outlet></router-outlet>
    </div>

</div>

With this CSS: 
.container {
    display: grid;
    grid: ". nav ." 
        ". content ."
        / 3vh auto 3vh;
    row-gap: 1vh;
}

.item-navbar {
    grid-area: 1 / 1 / 2 / 4;
    position: relative;
    z-index: -1;
    background: #579C87;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.item-nav {
    grid-area: nav;
}

.item-content {
    grid-area: content;
    background: #D1C7B8;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

then nav-bar.component.html

<nav class="navbar" role="navigation" aria-label="main navigation">

    <div class="navbar-brand">
        <a class="navbar-item" routerLink="/">
            <div class="img">
                <img src="logo.jpg">
            </div>
        </a>
    </div>

    <div class="navbar-menu">
        <a routerLink="/dashboard" class="navbar-item">Dashboard</a> 
    </div>

    <div class="navbar-logout">
        <a routerLink="/logout" class="navbar-item">Logout</a> 
    </div>
</nav>

with this CSS: 
.navbar {
    display: grid;
    grid-template-columns: 64px auto auto;
    grid-template-rows: auto;
    grid-template-areas: "image navs logout";
    gap: 1vh;
}

.navbar-brand {
    grid-area: image;
    place-self: center / start;
}

.navbar-menu {
    grid-area: navs;
    place-self: center start;
}

.navbar-logout {
    grid-area: logout;
    place-self: center end;
}

Answer 1

There is nothing wrong or invalid with nesting grid containers. The grid specification neither prohibits nor even admonishes against the practice.

In fact, the spec says this:

Grid containers can be nested or mixed with flex containers as necessary to create more complex layouts.

Nesting grid containers is what you must do to apply grid properties to the descendants of a top-level container, since grid layout works only between parent and child elements.

More details here:

• Grid properties not working on elements inside grid container
• Positioning content of grid items in primary container (subgrid feature)

Answer 2

It is not bad practice, it is recommended for proper display.

I have one caveat to mention, separate each nested level into its own file for debugging purposes. When nesting multiple levels deep, a single missing or misplaced </div> can significantly alter the output and will be very hard to debug. My suggestion is any further nesting also should be split out into separate components, so each level can be tested independently.

Answer 3

To answer your question, it is an acceptable practice to nest grid or flex components: csswg

Here is an example that demonstrates a nested grid: gridbyexample

Answer 4

Nesting grid containers is an acceptable practice.