停止浮动元素创建行

Question

我正在使用一些浮动的divs来创建一个砌体网格样式，但是由于网格的样式，我遇到浮动问题。如果结尾div高于divs的其余部分，则一旦到达行尾，则会阻止下一行浮动到下方。而是创建自己的行......这可以克服吗？

.sqw1h1{
  width: 20vw;
  padding-bottom: 20%;
  background: green;
}
.sqw2h1{
  width: 40vw;
  padding-bottom: 20%;
  background: blue;
}
.sqw2h2{
  width: 40vw;
  padding-bottom: 40%;
  background: red;
}
.sqw1h2{
  width: 20vw;
  padding-bottom: 40%;
  background: purple;
}
.item{
  position: relative;
  background-position: center center;
  background-size: 100% auto;
  height: 0;
  display: inline-block;
  float: left;
  vertical-align: top;
}
.y3{
  background: orange;
}

<div class="featured-grid">
  <div class="item sqw2h2">
  </div>
  <div class="item sqw1h1">
  </div>
  <div class="item sqw2h1">
  </div>
  <div class="item sqw1h1 y3">
  </div>
  <div class="item sqw1h1">
  </div>
  <div class="item sqw1h2">
  </div>
  <div class="item sqw2h2">
  </div>
</div>

JsFiddle - https://jsfiddle.net/fxr37nmx/1/