JSFiddle - React, Tailwind, and code Playground

HTML

<header></header>
<nav></nav>
<main>
  I am your Main Text
</main>
<div class="werbung">
<h2>Buy me!</h2>
I am good for you!
</div>
<aside>Ceterum censeo googlem delendum esse</aside>
<footer></footer>

CSS

body {
  display: grid;
  grid-template: "head head head" auto
                 "nav nav nav" auto
                 "main main gap1" 1em
                 "main main werb" 10em
                 "main main gap2" 3em
                 "main main info" 1fr
                 "foot foot foot" auto /
                 10em 1fr 10em;
  background-color: #cfc;
}

header, footer, aside, .werbung, nav, main {
  border: 1px solid black;
}

header, footer {
  height: 3em;
  background-color: #afa;
}
header { grid-area: head; }
footer { grid-area: foot; }
nav {
  grid-area: nav; 
  background-color: #cff; height: 1em;
}
main { 
  grid-area: main;
}
.werbung {
  grid-area: werb;
  background-color: #f88;
}
aside {
  grid-area: info;
  background-color: #bbf;
}