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

One good way to do this without doing much manupulation in your markup would be to use CSS Multi Column layouts.

You can wrap your masonry items into an <article> tag and give it a column-count and column-gap.

Something like this:

article {
    column-count: 4;
    column-gap: 10px; 
}

By using this, you can just change the column-count and get as many columns as you want without changing the markup

The result would look something like this:

here is a codepen for the demo.

hope it helps! 😊

---

Extra: here's a great discussion on CSS multi column layouts.

You can achieve it using CSS3 flexbox. Try this example https://codepen.io/AdamBlum/pen/fwrnE