<div class="page">
  <header>Cabecera</header>
  <nav>Menú</nav>
  <div class="body">Contenido principal</div>
  <aside>Menú lateral</aside>
  <footer>Pie</footer>
</div>
.page {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr 1fr 1.5fr;
  grid-template-rows: 0.75fr 0.75fr 2fr 2fr 0.75fr;
  grid-template-areas:
    "header  header  header  header"
    "nav     nav     nav     aside "
    "body    body    body    aside "
    "body    body    body    aside "
    "footer  footer  footer  footer";
  height: 100vh;
  padding: 10px;
  text-align: center;
}
header {
  grid-area: header;
  padding: 20px;
  background-color: #DC493A;
  color: #FFFFFF;
}
nav {
  grid-area: nav;
  padding: 20px;
  background-color: #4F3130;
  color: #FFFFFF;
}
.body {
  grid-area: body;
  padding: 20px;
  background-color: #3FA7D6;
  color: #FFFFFF;
}
aside {
  grid-area: aside;
  padding: 20px;
  background-color: #FAC05E;
  color: #FFFFFF;
}
footer {
  grid-area: footer;
  padding: 20px;
  background-color: #59CD90;
  color: #FFFFFF;
}
@media screen and (max-width: 800px) {
  .page {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 0.5fr 0.5fr 4fr 1fr;
    grid-template-areas:
      "header  header"
      "nav     nav   "
      "body    aside "
      "footer  footer";
  }
}
@media screen and (max-width: 400px) {
  .page {
    grid-template-columns: 1fr;
    grid-template-rows: 0.5fr 0.5fr 4fr 2fr 1fr;
    grid-template-areas:
      "header"
      "nav   "
      "body  "
      "aside "
      "footer";
  }
}
/* AUX GENERIC CSS */
* {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  box-sizing: border-box;
}
Rerun