Popular posts

Using CSS Flexbox you can orient items column wise to get the same masonry effect.

HTML

<div class="masonary-layout">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

CSS

.masonary-layout{
  display: flex;
  flex-direction: column;
  height: 350px;
  width: 600px;
  flex-wrap: wrap;
}

.box{
  width: 100px;
  background: red;
  margin: 10px;
  &:nth-child(1){
    height: 100px;
  }
  &:nth-child(2){
    height: 200px;
  }
  &:nth-child(3){
    height: 300px;
  }
  &:nth-child(4){
    height: 200px;
  }
  &:nth-child(5){
    height: 100px;
  }
  &:nth-child(6){
    height: 200px;
  }
}

Demo