How to make grid like at picture?

Question

I have tried to make it look like the below picture and my example code, but I can't do it. Please suggest me how to make it using css display: grid.

Can't use grid-template-rows: masonry, because I need compability with IE

enter image description here

---

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
}

.grid>div {
  border: 1px solid #ccc;
}

.first {
  height: 160px;
  grid-area: 1 / 1 / 2 / 2;
}

.second {
  height: 160px;
  grid-area: 1 / 2 / 2 / 3;
}

.third {
  height: 80px;
  grid-area: 2 / 1 / 3 / 2;
}

.fourth {
  height: 300px;
  grid-area: 3 / 1 / 4 / 2;
}

.fifth {
  height: 550px;
  grid-area: 2 / 2 / 5 / 3;
}

<div class="grid">
  <div class="first"> 1</div>
  <div class="second">2 </div>
  <div class="third"> 3</div>
  <div class="fourth"> 4</div>
  <div class="fifth">5 </div>
</div>