Masonry работает не коректно, блоки не всегда подстраиваются под высоту верхнего

Делаю масонри использую masonry.desandro

Блоки не всегда выстраиваются под высоту верхнего

структура

<div class="main-posts grid"
 <div class="post grid-item">...</div>
 <div class="post grid-item">...</div>
 ...
 <div class="post grid-item">...</div>
 <div class="post grid-item">...</div>
</div>

стили

.grid-sizer,
.grid-item {
  float: left;
  height: 350px;
  width: 25%;
}

.grid-item--height2 { height: 400px; }
.grid-item--height3 { height: 450px; }
.grid-item--height4 { height: 500px; }

инициализирую

this.mainMasonry = new Masonry( this.$posts, {
  itemSelector: '.grid-item',
  columnWidth: '.grid-sizer',
  percentPosition: true,
  isFitWidth: true
  // resize: false
})

высоту делаю рандомно