Html 嵌套CSS网格是一种不好的做法吗？

我正在试验组件驱动的前端框架，比如Angular，最后学习CSS网格

我的问题是：嵌套CSS网格是否是一种不好的做法

我在这里所做的是在我的主/根组件中，我使用css网格制作了两件事：导航栏和主内容区域，因为导航栏将出现在整个应用程序中，也会出现在主内容中

正如您在下面看到的，根级别的网格然后是

组件中的另一个网格。在主要内容区域，可能会有更多，可能在我使用的每个/任何角度组件中都有一个网格

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

示例代码如下：

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: -->
<style>
.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);
}
</style>

<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: -->
<style>
.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;
}
</style>

.集装箱{
显示：网格；
网格：“.nav。”
“.content。”
/3vh自动3vh；
行间距：1vh；
}
.项目导航栏{
网格面积：1/1/2/4；
位置：相对位置；
z指数：-1；
背景#579C87；
盒影：0 1px 3px rgba（0,0,0,0.12），0 1px 2px rgba（0,0,0,0.24）；
}
.项目导航{
网格区域：导航；
}
.项目内容{
网格区域：内容；
背景：#D1C7B8；
盒影：0 1px 3px rgba（0,0,0,0.12），0 1px 2px rgba（0,0,0,0.24）；
}

然后 导航栏.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: -->
<style>
.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);
}
</style>

<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: -->
<style>
.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;
}
</style>

仪表板
注销
navbar先生{
显示：网格；
网格模板列：64px自动；
网格模板行：自动；
网格模板区域：“图像导航注销”；
间隙：1vh；
}
.navbar品牌{
网格区域：图像；
放置自我：居中/开始；
}
.导航栏菜单{
网格区域：导航；
放置自我：中心开始；
}
.导航栏注销{
网格区域：注销；
位置：中心端；
}

为了回答您的问题，嵌套网格或flex组件是一种可接受的做法：

---

下面是一个演示嵌套网格的示例：

嵌套网格容器没有任何错误或无效

政府并没有禁止甚至告诫这种做法

网格容器可以根据需要嵌套或与flex容器混合，以创建更复杂的布局

事实上，嵌套网格容器是将网格属性应用于顶级容器的子体所必须做的，因为网格布局仅在父元素和子元素之间工作

详情如下：

---

嵌套网格容器是一种可接受的做法。

这是一种不错的做法，建议正确显示

我有一个警告要提到，为了调试的目的，将每个嵌套级别分离到它自己的文件中。当嵌套多个级别时，单个缺失或错位的

会显著改变输出，并且很难调试。我的建议是，任何进一步的嵌套也应该分割成单独的组件，这样每个级别都可以独立测试