Q:

Masonry - Divs don't align

I am trying to create a masonry layout for a product page on my website. There is one square image with width: 50%; and then there should be 4 square images each with width: 25% which stack on top of one another. 
This is what I have achieved so far: 
https://prism-ferret-k6wy.squarespace.com/shop/
As you will see there are two images beneath that can fit into the empty space that's available. 
Codepen: https://codepen.io/dwinnbrown/pen/aQmOVR
This is my Javascript:
$('.ProductList-grid').masonry({
            itemSelector: '.ProductList-item',
            percentPosition: true
          });

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

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

This is how it should look:

A:

Using a grid-sizer to determine the columnWidth also works:
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
  });
});

Documentation to responsive layout: https://masonry.desandro.com/layout.html#responsive-layouts

