Не прерывая широкие предметы в Masonry JS

Question

Я использую масонство как макет движка. Моими базовыми элементами сетки являются квадраты (в этом примере ширина 25%), в то время как широкие элементы имеют ширину 100%.

До сих пор проблем не было, но я бы хотел, чтобы широкие элементы не прерывали поток элементов, чтобы не оставалось так много пустых мест. Это возможно?

Заранее спасибо.

Вот код:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<style>
  .grid-sizer, .grid-item { width: 25%; height: 25vw; border: 1px; border-color: black; border-style: solid; margin: 0; box-sizing: border-box; text-align: center; font-size: 60px; color: darkgray; font-family: sans-serif; padding-top: 50px;}
  .grid-item--width2 { width: 100%; }
</style>
<div class="grid">
  <div class="grid-sizer"></div>
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item grid-item--width2">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
</div>
<script>
$('.grid').masonry({
  itemSelector: '.grid-item',
  columnWidth: '.grid-sizer',
  percentPosition: true
})
</script>

Текущий макет (изображение)

Ожидаемый результат (изображение)

Обновление заметки:

Я до сих пор не знаю, как добиться ожидаемых результатов в Masonry, но есть простой способ CSS сделать это: сетка с плотным автоматическим потоком сетки .