Divs aligned with different Height

Question

I need to make this effect of the Divs being different sizes, but always 'embedded', but I’m not getting away with it. I’m using Materialize, there’s some 'trick' to it?

I don’t know if it makes it easier, but I left a structure here that looks a little bit like the Divs that I have https://jsfiddle.net/5gy7apL4/

.col {
  border: 1px solid #000;
  margin: 16px;
}

.maior {
  height: 250px;
}

.menor {
  height: 180px;
}

<div class="row">
   <div class="col s3 maior"></div>
   <div class="col s3 menor"></div>
   <div class="col s3 maior"></div>
   <div class="col s3 maior"></div>
   <div class="col s3 menor"></div>
   <div class="col s3 maior"></div>
   <div class="col s3 maior"></div>
   <div class="col s3 menor"></div>
   <div class="col s3 maior"></div>
</div>