logo标签列表

CSS Grid嵌套是不好的实践吗？

htmlcssangulargridcss-grid
17

我正在尝试使用基于组件的前端框架，例如Angular，并最终学习CSS Grid。

我的问题是：在CSS Grids中进行嵌套是否是不良实践？

在我的主/根组件中，我所做的是使用CSS Grid制作两个东西：导航栏和主内容区域，因为导航栏将出现在整个应用程序以及主要内容中。

如下所示，在根级别上有一网格，然后在<nav-bar>组件中又有一个网格。在主内容区域中，可能会有更多的网格，可能会在我使用的每个/任何Angular组件中都有一个网格。

**********************    ******************************
*       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-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: -->
<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>
4个回答
16
嵌套网格容器没有任何问题或无效。 网格规范 不禁止，甚至不警告这种做法。它说道：

必要时，网格容器可以嵌套或与弹性容器混合使用以创建更复杂的布局。

事实上，嵌套网格容器是您必须执行的操作，以将网格属性应用于顶层容器的后代，因为网格布局仅在父元素和子元素之间起作用。
更多细节请参见：
7

这并不是不好的做法，而是为了正确显示建议使用。

但我想提醒一点，在调试时应该将每个嵌套级别单独放在一个文件中。当嵌套层次较深时，一个缺失或错位的</div>标签会严重影响输出结果，而且很难调试。我的建议是，进一步嵌套也应该拆分成单独的组件，以便可以独立测试每个层级。

5

回答您的问题，嵌套网格或弹性组件是一种可接受的做法：csswg

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

2
嵌套网格容器是一种可接受的做法。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接