SOURCE

    <div class="grid-container">
        <div class="item1">1</div>
        <div class="item2">2</div>
        <div class="item3">3</div>
        <div class="item4">4</div>
        <div class="item5">5</div>
        <div class="item6">6</div>
        <div class="item7">7</div>
      <div class="item8">8</div>
      <div class="item9">9</div>
      <div class="item10">10</div>
    </div>

.grid-container{
  display: grid;
  height: 100%; 
  background: #d4d4d4; 
  grid-gap: 5px;
  grid-template-columns: 150px 80px 80px 150px 150px;
  grid-template-rows: 40px 60px 80px 40px 100px 60px;
  grid-template-areas: 
'a   a1  a1  a1 a1'
'a2  a3  a3  a3 a4'
'a2  a7  a8  a8 a4'
'a2  a7  a9  a9 a9'
'a5  a7  a9  a9 a9'
'a6  a6  a6  a6 a6'
}
.item1{grid-area: a;}
.item2{grid-area: a1;}
.item3{grid-area: a2;}
.item4{grid-area: a3;}
.item5{grid-area: a4;}
.item6{grid-area: a5;}
.item7{grid-area: a6;}
.item8{grid-area: a7;}
.item9{grid-area: a8;}
.item10{grid-area: a9;}
.grid-container > div {
  border: 1px grey solid;
  background: #abd1d8;
}
html,body{
  height: 100%;
  width: 100%;
}