EmmanuelDemey · May 27, 2024 13:41
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  <head>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div id="body">
      <header>Header</header>
      <nav>Menu</nav>
      <main>Main</main>
      <aside>Right</aside>
      <footer>Footer</footer>
    </div>
  </body>
 </html>
diff --git a/solution.css b/solution.css
 #body {
  height: 100vh;
  display: grid;
  grid-template-rows: 5% 1fr 20%;
  grid-template-columns: 20% 1fr 1fr 20%;
  grid-gap: 5px;
  grid-template-areas:
    "header header header header"
    "nav nav main sidebar"
    "nav nav footer footer";
 }

 header {
  background-color: #2196f3;
  grid-area: header;
 }

 nav {
  background-color: red;
  grid-area: nav;
 }

 main {
  background-color: cyan;
  grid-area: main;
 }

 aside {
  background-color: yellow;
  grid-area: sidebar;
 }

 footer {
  background-color: green;
  grid-area: footer;
 }
diff --git a/style.css b/style.css
 #body {
  height: 100vh;
 }

 header {
  background-color: #2196f3;
 }

 nav {
  background-color: red;
 }

 main {
  background-color: cyan;
 }

 aside {
  background-color: yellow;
 }

 footer {
  background-color: green;
 }
	<!DOCTYPE html>
	<html>
	<head>
	<link rel="stylesheet" href="style.css" />
	</head>
	<body>
	<div id="body">
	<header>Header</header>
	<nav>Menu</nav>
	<main>Main</main>
	<aside>Right</aside>
	<footer>Footer</footer>
	</div>
	</body>
	</html>