嵌套 CSS 网格是不好的做法吗?

问题描述

我正在尝试使用组件驱动的前端框架，例如 Angular，最后学习 CSS Grid.

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

我的问题是:嵌套 CSS Grids 是不好的做法吗?

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

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

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.

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

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      *
*                    *
**********************

示例代码如下:

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>

推荐答案

嵌套网格容器没有任何问题或无效.

There is nothing wrong or invalid with nesting grid containers.

网格规范不禁止，甚至不警告，实践.上面写着:

The grid specification doesn't prohibit, or even admonish, against the practice. It says this:

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

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

事实上，嵌套网格容器是您必须将网格属性应用于顶级容器的后代的操作，因为网格布局仅适用于父元素和子元素之间.

In fact, 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.

更多细节在这里:

• 网格属性不适用于网格容器内的元素
• 在主容器中定位网格项的内容(子网格功能)

这篇关于嵌套 CSS 网格是不好的做法吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！