Masonry with set heights

Question

I have used Masonry for a few things but wanted to try out a new effect which in my eyes involves set heights (or may not need to). This is the effect I'm trying to get:

The way I've gone about it is to add 2 additional classes called horizontal and vertical, each with different heights. That seems to be ok. The issue I am having is it isn't making a masonry effect. I have linked a codepen below of what I have so far and the markup / jquery to match.

https://codepen.io/amymatrix/pen/wrBYPK

HTML

<section class="grid masonry">
    <div class="grid-sizer"></div>
        <div class="grid-item gallery horizontal">
            <div class="gallery-style"></div>
        </div>
        <div class="grid-item gallery horizontal">
            <div class="gallery-style"></div>
        </div>
        <div class="grid-item gallery vertical">
            <div class="gallery-style"></div>
        </div>
        <div class="grid-item gallery horizontal">
            <div class="gallery-style"></div>
        </div>
    </div>
</section>

jQuery

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

SCSS

.grid-item {
    float: left;
    width: 33.33%;
}

.gallery {
    &.horizontal { 
        .gallery-style { height: 350px }
    }
    &.vertical { 
        .gallery-style { height: 700px }
    }
}  

My issue is the white gap appearing under the two top images due to the vertical one on the right. I'd ideally like the fourth and fifth image to shimmy up and take that spot.

Is there a way to prevent that gap? Or another way I could go about doing this?

Answer 1

Your example is good the problem was the you weren't calling jquery codepen

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

just add jquery at the to of your html

<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>