<div id="grid">
  <header>Header</header>
  <aside class="sidebar-left">whatever left</aside>
  <article id="main-section">Main</article>
  <aside class="sidebar-right">whatever right</aside>
  <footer>Footer</footer>
</div>
#grid {
  display: grid;
  grid-template-columns: 100px auto 100px;
  grid-template-rows: 50px auto 50px;
  grid-gap: 1em;
  min-height: 100vh;
}

header,
footer {
  grid-column: 1 / 4;
}

header {
  background-color: #ffe6cc;
}
.sidebar-left {
  background-color: #e1d5e7;
}
article {
  background-color: #f8cecc;
}
.sidebar-right {
  background-color: #dae8fc;
}
footer {
  background-color: #d5e7d4;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.