<section class="grid">
  <div class="grid-left gbox box1">1</div>
  <div class="grid-top-right gbox box2">2</div>
  <div class="grid-bottom-left gbox box3">3</div>
  <div class="grid-bottom-right gbox box4">4</div>
</section>

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
}
/* Grid ....*/
.grid {
  display: grid;
  max-width: 1280px;
  margin: auto;
  padding: 20px;
  grid-template-areas:
    "lside  rside rside"
    "lside   mid1 mid2";
  grid-template-rows: auto;
  grid-template-columns: 2fr 1fr 1fr;
  grid-gap: 1rem;
  margin-bottom: 1rem;
}
.grid-left {
  grid-area: lside;
}
.grid-top-right {
  grid-area: rside;
}
.grid-bottom-left {
  grid-area: mid1;
}
.grid-bottom-right {
  grid-area: mid2;
}
.gbox {
  text-align: center;
  color: white;
  padding: 3rem 0;
}
.box1 {
  background-color: #9b59b6;
}
.box2 {
  background-color: #34495e;
}
.box3 {
  background-color: #e67e22;
}
.box4 {
  background-color: #e74c3c;
}
.box5 {
  background-color: #2ecc71;
}