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>

.grid-container{
  display: grid;
  height: 100%; 
  background: #d4d4d4; 
  grid-gap: 10px;
  grid-template-columns: 50px 150px 150px 50px;
  grid-template-rows: 50px 100px 100px 50px;
  grid-template-areas: 
    'a  a  a  a '
    'b  c  c  d'
    'b  e  f  d'
    'g  g  g  g'
}
.item1{grid-area: a;}
.item2{grid-area: b;}
.item3{grid-area: c;}
.item4{grid-area: d;}
.item5{grid-area: e;}
.item6{grid-area: f;}
.item7{grid-area: g;}

.grid-container > div {
  border: 1px grey solid;
  background: #abd1d8;
}
html,body{
  height: 100%;
  width: 100%;
}