<style>
  .div-wrapper {
    width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 2fr 1fr 1fr;
    grid-auto-rows: 100px;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    grid-template-areas:
    "d1 d1 d2 d4"
    "d1 d1 d3 d4"
    "d1 d1 d5 d6"
    "d7 d10 d8 d8"
    "d7 d9 d8 d8";
  }
  .div {
    background-color: #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .div-1 {
    grid-area: d1;
  }
  .div-2 {
    grid-area: d2;
  }
  .div-3 {
    grid-area: d3;
  }
  .div-4 {
    grid-area: d4;
  }
  .div-5 {
    grid-area: d5;
  }
  .div-6 {
    grid-area: d6;
  }
  .div-7 {
    grid-area: d7;
  }
  .div-8 {
    grid-area: d8;
  }
  .div-9 {
    grid-area: d9;
  }
  .div-10 {
    grid-area: d10;
  }
</style>
<section class="div-wrapper">
  <div class="div div-1">1</div>
  <div class="div div-2">2</div>
  <div class="div div-3">3</div>
  <div class="div div-4">4</div>
  <div class="div div-5">5</div>
  <div class="div div-6">6</div>
  <div class="div div-7">7</div>
  <div class="div div-8">8</div>
  <div class="div div-9">9</div>
  <div class="div div-10">10</div>
</section>