<div class="container">
  <div class="item header"> Header</div>
  <div class="item small-box-1">Small box 1</div>
  <div class="item small-box-2">Small box 2</div>
  <div class="item small-box-3">Small box 3</div>
  <div class="item sidebar">Sidebar</div>
  <div class="item main">Main content</div>
  <div class="item footer">Footer</div>
</div>

.container {
  padding: 20px;
  width: 700px;
  margin: 20px auto;
  height: 600px;
  
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 0.3fr 0.5fr 1fr 0.3fr;
  grid-gap: 20px;
  
  grid-template-areas: "head head head head"
                       "box1 box1 box-3 box-4"
                       "main main main side"
                       "foot foot foot foot";
}

.item {
  padding: 20px;
  background-color: orangered;
  color: #fff;
  font-family: sans-serif;
  font-size: 20px;
}
.small-box-1 {
  grid-area: box1;
}
.header {
  grid-area: head;
  background-color: lightblue;
}

.sidebar {
  grid-area: side;
  background-color: lightcoral;
}

.main {
  grid-area: main;
  background-color: lightskyblue;
}

.footer {
  grid-area: foot;
  background-color: lightgreen;
}

.small-box-1 {
  background-color: lightslategray;
}

.small-box-2 {
  background-color: lightseagreen;
}

.small-box-3 {
  background-color: lightgray;
}