Масонство - Div не выравнивают

Question

Я пытаюсь создать макет кладки для страницы продукта на моем веб-сайте. Есть одно квадратное изображение с width: 50%;, а затем должно быть 4 квадратных изображения, каждое с width: 25%, которые накладываются друг на друга.

Вот чего я достиг: https://prism -ferret-k6wy.squarespace.com / магазин /

Как вы увидите, есть два изображения внизу, которые могут вписаться в доступное пустое пространство.

Codepen: https://codepen.io/dwinnbrown/pen/aQmOVR

Это мой Javascript:

$('.ProductList-grid').masonry({
            itemSelector: '.ProductList-item',
            percentPosition: true
          });

и мой CSS:

.ProductList .ProductList-item:nth-child(5n-4) {
        width: 50% !important;
    }


.ProductList .ProductList-item {
        float: none !important;
        margin: 0 !important;
        width: 25% !important;
    }

Вот как это должно выглядеть:

Answer 1

Использование grid-sizer для определения columnWidth также работает: https://codepen.io/anon/pen/pQEJXV

<div class="container">
  <!-- width of .grid-sizer used for columnWidth -->
  <div class="grid-sizer"></div>
  <div class="grid-item grid-item--width2 grid-item--height2">1
  </div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>  
  <div class="grid-item">5</div>
</div>

CSS

* { box-sizing: border-box; }
.container {
  max-width: 1200px;
  margin: auto;
}

.grid-item:first-of-type {
  background-color: pink !important;
}

.grid-sizer,
.grid-item {
  width: 25%;
}

.grid-item {
  height: 150px;
  float: left;
}

.grid-item--width2 {
  width:50%;
}

.grid-item--height2{
  height:300px;
}

.grid-item:nth-child(odd) {
  background-color: green;
}
.grid-item:nth-child(even) {
  background-color: orange;
}

JS

$(document).ready(function() {
  $('.container').masonry({
    itemSelector: '.grid-item',
    columnWidth: '.grid-sizer',
    percentPosition: true
  });
});

Документация к адаптивному макету: https://masonry.desandro.com/layout.html#responsive-layouts

Answer 2

HTML

<div class="container">
          <div class="grid-item">1</div>
          <div class="small-size">
                 <div class="grid-item">2</div>
                 <div class="grid-item">3</div>
                 <div class="grid-item">4</div>
                 <div class="grid-item">5</div>
          </div>
   </div>

CSS

.container {
  max-width: 1200px;
  margin: 0 auto;
}

.grid-item:first-of-type {
  background-color: pink !important;
  width: calc(50% - 10px);
  height: 300px;
}

.grid-item:nth-child(odd) {
  background-color: green;
}
.grid-item:nth-child(even) {
  background-color: red;
}

.small-size {
 display: flex;
 flex-wrap: wrap;
 width: 50%;
}

.small-size .grid-item {
  width: 50%;
  height: 150px;
}

JS

$(document).ready(function() {
  $('.container').masonry({
    percentPosition: true,
    gutter: 10
  });
});