Masonry layout is loading with height 0px

I'm trying to load images into a simple masonry.js layout, with images loaded first, and it looks like masonry is applying height: 0px to both the grid and grid items. Any idea why this is happening? Here is the js I am using, and a codepen.

http://codepen.io/kathryncrawford/pen/WwGVNa

JS

jQuery(function ($) {

var $container = $('.js-grid').imagesLoaded( function() { 

console.log("images are loaded");
    $container.masonry({
        itemSelector : '.js-masonry',
        columnWidth: 100
    });
    });
});