<div class="container">
  <header class="menu">MENU</header>
  <aside class="lateral-esquerda">LATERAL ESQUERDA</aside>
  <aside class="lateral-direita"> LATERAL DIREITA</aside>
  <main class="conteudo-principal"> PRINCIPAL</main>
  <footer class="rodape">RODAPE</footer>
</div>
body {
 text-align: center; 
  height: 100vh;
}

.container {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: 1fr 4fr 1fr;
  grid-template-areas: 
    'menu menu menu'
    'lateral-esquerda conteudo-principal lateral-direita'
    'rodape rodape rodape';
  font-family: Sans-serif;
  color: #ffffff;
  height: 100%;
}

.menu {
  background-color: #283149;
  grid-area: menu;
}

.lateral-esquerda {
  background-color: #00818a;
  grid-area: lateral-esquerda;
}

.lateral-direita {
  background-color: #00818a;
  grid-area: lateral-direita;
}

.conteudo-principal {
  background-color: #404b69;
  grid-area: conteudo-principal;
}

.rodape {
  background-color: #283149;
  grid-area: rodape;
}

@media only screen and (max-width: 700px) {
  .container {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(4, 1fr);
    grid-template-areas: 
      'menu menu'
      'lateral-esquerda conteudo-principal' 
      'lateral-direita lateral-direita'  
      'rodape rodape';
    grid-gap: 10px;
    height: 100%;
  }
  
}

@media only screen and (max-width: 500px) {
  .container {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-auto-rows: 1fr;
    grid-template-areas: 
      'menu'
      'lateral-esquerda'
      'conteudo-principal' 
      'lateral-direita'  
      'rodape';
    grid-gap: 5px;
    height: 100%;
  }
  
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.