💻 Tech
With grid, we can semantically assign grid areas to different parts of the UI. Instead of using grid-column and grid-row in each component, a grid-area is assigned to each and is referenced in grid-template-areas.
index.html
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="src/style.css" />
</head>
<body>
<div class="header"></div>
<div class="sidenav"></div>
<div class="content"></div>
<div class="footer"></div>
</body>
</html>style.css
body {
margin: 0;
height: 100vh;
background-color: black;
display: grid;
grid-template-columns: 1fr 8fr;
grid-template-rows: 1fr 5fr 1fr;
grid-template-areas:
"sidenav header"
"sidenav content"
"footer footer";
}
.header {
width: 100%;
height: 100%;
display: grid;
background-color: yellow;
grid-area: header;
}
.sidenav {
width: 100%;
height: 100%;
display: grid;
background-color: red;
grid-area: sidenav;
}
.content {
width: 100%;
height: 100%;
display: grid;
background-color: blue;
grid-area: content;
}
.footer {
width: 100%;
height: 100%;
display: grid;
background-color: green;
grid-area: footer;
}Source: