<div class="container">
  <header>Header</header>
  <main>Main content</main>
  <aside class="left-sidebar">Left sidebar</aside>
  <aside class="right-sidebar">Right sidebar</aside>
  <footer>Footer</footer>
</div>
.container {
  display: grid;
  grid-template-columns: 11rem 1fr 11rem;
  grid-gap: 0.625rem;
}

.container > * {
  padding: 1.875rem;
  font-size: 1.875rem;
  font-weight: 800;
  text-align: center;
  background: #dfeffd;
  border: 3px solid #457fdc;
  color: #457fdc;
}
header, 
footer {
  grid-column: 1 / span 3;
}
.left-sidebar {
  grid-area: 2 / 1;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.