<div class="items">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
  <div class="item item4">4</div>
  <div class="item item5">5</div>
  <div class="item item6">6</div>
  <div class="item item7">7</div>
</div>

html,body{
  margin: 30px 10px;
  padding: 0;
}

.items{
  height: 80vh;
  display: grid;
  grid-template-columns: repeat(6, [col]1fr);
  grid-template-rows: repeat(3, [row]1fr);
  grid-gap: 8px;
}

.item{
  background: #333;
  color: #fff;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item1{
  grid-column: col 1 / col 3;
  grid-row: row 1 / row 5;
}

.item2{
  grid-column: col 3 / col 5;
  grid-row: row 1 / row 3;
}

.item4{
  grid-column: col 6 / col 7;
}

.item5{
  grid-column: col 5 / col 6;
  grid-row: row 2 / row 3;
}

.item6{
  grid-column: col 6 / col 7;
  grid-row: row 2 / row 3;
}

.item7{
  grid-column: col 3 / col 7;
  grid-row: row 3 / row 5;
}