砌体类型布局问题

Question

.masonry {
    column-count: 1;
    column-gap: 20px;
    max-width: 900px;
    margin: 20px auto;
}

@media only screen and (min-width: 600px) {
  .masonry {
    column-count: 2;
  }
}

.item { 
    background-color: #eee;
    display: inline-block;
    margin: 0 0 1em;
    width: 100%;
  color: #fff;
  font-size: 40px;
}

.item--type1 {
  width: 100%;
  height: 200px;
  background: red;
}
.item--type2 {
  width: 100%;
  height: 400px;
  background: blue;
}
.item--type3 {
  width: calc(50% - 40px);
  height: 600px;
  background: green;
  margin-right: 20px;
}

<div class="masonry">
  <div class="item item--type1">1</div>
  <div class="item item--type2">4</div>
  <div class="item item--type3">2</div>
  <div class="item item--type3">3</div>
</div>

我只是试图构建如下图所示的布局。我试图与列数：2  无法实现正确的订单。这种布局有任何新的解决方案吗？

PS：CSS网格无法正确地与IE一起使用。