<div class="container">
  <div class="box header">Header</div>
  <div class="box sidebar">Sidebar</div>
  <div class="box content">Content</div>
  <div class="box sidebar2">Sidebar 2</div>
  <div class="box footer">Footer</div>
</div>
* {
  box-sizing: border-box;
  font-family: "Raleway", sans-serif;
}

.container {
  display: grid;
  grid-gap: 1em;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 100px;
  grid-template-areas:
    "... header header header header ..."
    "... header header header header ..."
    "sidebar content content content content sidebar2"
    "sidebar content content content content sidebar2"
    "footer footer footer footer footer footer"
    "footer footer footer footer footer footer";
  background-color: #fff;
  color: #444;
}
.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

.sidebar {
  grid-area: sidebar;
}

.sidebar2 {
  grid-area: sidebar2;
}
.content {
  grid-area: content;
}

.header {
  grid-area: header;
}

.footer {
  grid-area: footer;
}

.header {
  background-color: #663399;
}

.footer {
  background-color: #2632c2;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.