<div class="grid">
  <header class="grid__header">HEADER</header>
  <main class="grid__main">
    MAIN
  </main>
  <aside class="grid__sidebar-left"></aside>
  <aside class="grid__sidebar-right"></aside>
  <footer class="grid__footer">FOOTER</footer>
</div>
.grid {
  display: grid;
  grid-template-columns: 10% 15% auto 15% 10%;
  grid-template-rows: 200px auto 50px;
  text-align: center;
  color: #fff;
  
  &__header {
    background: #f00;
    grid-column-start: 2;
    grid-column-end: 5;
    grid-row-start: 1;
    grid-row-end: 1;
  }
  
  &__main {
    background: #0f0;
    grid-column-start: 2;
    grid-column-end: 5;
    grid-row-start: 2;
    grid-row-end: 2;
    min-height: 100px;
  }
  
  &__footer {
    background: #00f;
    grid-column-start: 1;
    grid-column-end: 6;
    grid-row-start: 3;
    grid-row-end: 4;
  }
  
  &__sidebar-left {
    background: #0ff;
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 3;
  }
  
    &__sidebar-right {
    background: #ff0;
    grid-column-start: 5;
    grid-column-end: 6;
    grid-row-start: 1;
    grid-row-end: 3;
  }
} 

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.