Это плохая практика, чтобы вкладывать CSS сетки?

Question

Я экспериментирую с компонентно-ориентированными интерфейсными средами, такими как Angular, и наконец изучаю CSS Grid.

Мой вопрос : это плохая практика для гнезда CSS Grids?

То, что я сделал здесь, в моем основном / корневом компоненте, я использовал css grid, чтобы сделать две вещи: панель навигации и область основного содержимого, так как панель навигации будет присутствовать во всем приложении, а такжеосновное содержание.

Как вы можете видеть ниже, сетка на корневом уровне, а затем другая сетка в компоненте <nav-bar>.И в основной области контента будет гораздо больше, вероятно, сетка в каждом / любом угловом компоненте, который я использую.

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

затем 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

Это неплохая практика, рекомендуется для правильного отображения.

Я хочу упомянуть одно предостережение: разделить каждый вложенный уровень в отдельный файл для целей отладки. При глубинном вложении нескольких уровней один отсутствующий или неуместный </div> может существенно изменить вывод и его будет очень сложно отладить. Мое предложение заключается в том, что любое дальнейшее вложение также должно быть разбито на отдельные компоненты, чтобы каждый уровень можно было протестировать независимо.

Answer 2

Нет ничего плохого или недействительного в контейнерах вложенности сетки. спецификация сетки не запрещает и даже не предостерегает от практики.

На самом деле, спецификация говорит это :

Грид-контейнеры могут быть вложены или смешаны с гибкими контейнерами, если необходимо создать более сложные макеты.

Вложенные контейнеры сетки - это то, что вы должны сделать, чтобы применить свойства сетки к потомкам контейнера верхнего уровня, поскольку компоновка сетки работает только между родительскими и дочерними элементами.

Подробнее здесь:

• Свойства сетки не работают с элементами внутри контейнера сетки
• Позиционирование содержимого элементов сетки в первичном контейнере (функция подсетки)

Answer 3

Вложенная сетка контейнеров является приемлемой практикой.

Answer 4

Чтобы ответить на ваш вопрос, это приемлемо практика для вложения компонентов сетки или flex: csswg

Вот пример, демонстрирующий вложенную сетку: gridbyexample