I have been exploring component-driven front-end frameworks like Angular and honing my skills in CSS Grid.
My query is: Is it considered a bad practice to nest CSS Grids?
In my main/root component, I have utilized CSS grid to create two elements: the navbar and the main content area. Since the navbar will be present throughout the app along with the main content, I decided to use CSS grid for layout purposes.
As displayed below, there is a grid at the root level and another grid within the <nav-bar> component. Additionally, each Angular component within the main content area will likely have its own grid as well.
********************** ******************************
* Navbar * => * img | nav | logout *
********************** ******************************
**********************
* *
* Content *
* *
**********************
Sample code:
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>
<!-- Styling: -->
<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>
and 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>
<!-- Styling: -->
<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>