<div class="grid-container">
  <div class="grid-element header">Header</div>
  <div class="grid-element sidebar">Sidebar</div>
  <div class="grid-element main">Main Content</div>
  <div class="grid-element extra">Extra Content</div>
  <div class="grid-element footer">Footer</div>
</div>

body {
  text-align: center;
  font-family: "Dosis";
}

.grid-container {
  display: grid;
  grid-template-columns: 0.25fr 10px 0.75fr;
  grid-template-rows: auto 20px auto 20px auto 20px auto;
}

.grid-element {
  background-color: #444;
  color: #fff;
  padding: 20px;
  font-size: 2em;
}
.header {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;
  background: #69F;
}

.sidebar {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 3;
  grid-row-end: 6;
  background: #6F9;
}

.main {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 3;
  grid-row-end: 4;
  background: #F69;
  height:400px;
}

.extra {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 5;
  grid-row-end: 6;
  background: #9F6;
}

.footer {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 7;
  grid-row-end: 8;
  background: #F96;
}