<div class="wrapper">
  <div class="box header">Header</div>
  <div class="box sidebar">Sidebar</div>
  <div class="box content">Content</div>
  <div class="box footer">Footer</div>
</div>
// The grid
.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    "header  header  header"
    "sidebar content content"
    "footer  footer  footer";
  
  max-width: 960px;
  margin: 0 auto;
}

.header  { grid-area: header }
.sidebar { grid-area: sidebar }
.content { grid-area: content }
.footer  { grid-area: footer }

body {
  font-family: -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  font-size: 16px;
}

.box {
  background: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.