html - 嵌套 CSS 网格是不好的做法吗?
问题描述
我正在尝试使用组件驱动的前端框架,例如 Angular,最后学习 CSS Grid。
我的问题是:嵌套 是不好的做法CSS Grids
吗?
我在这里所做的是在我的主/根组件中,我使用 css 网格来制作两件事:导航栏和主要内容区域,因为导航栏将出现在整个应用程序以及主要内容中。
正如您在下面看到的,根级别的网格然后是<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>
然后 导航栏.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>
解决方案
嵌套网格容器没有任何问题或无效。
网格容器可以根据需要嵌套或与弹性容器混合,以创建更复杂的布局。
事实上,嵌套网格容器是将网格属性应用到顶级容器的后代必须执行的操作,因为网格布局仅适用于父元素和子元素之间。
更多细节在这里:
推荐阅读
- angular - 剑道角度用户界面:剑道网格单元选择/突出显示
- python - Python3防止嵌套列表并显示列表中值的位置/索引
- javascript - 计时器事件完成触发后,Div\label\Span 消失
- vba - 将数据移动到下一张不带标题的工作表
- php - 如何在 Laravel 5.6 中保存图像元数据
- testing - 在codeception中的每个cest文件之前制作
- crystal-reports - 水晶报表中的子报表重复且数据行中的填充过多
- python - 训练后用占位符交换 TensorFlow 数据集输入管道
- c# - ListView 获取多个条目值以验证和发送
- html - 如何仅将具有特定单词的代码行从 perl 文件复制到新文件中