Masonry creating long gaps between the top and the grid container

[ableslayer]

I followed the codepen called Iteratively reveal items and inserted the new masonry codes v4.2.2 and now there's a gap between the container and the very top of my html.

and here's the test case: https://codepen.io/ableslayer/full/RqqGzX/

How can I remove this gap?

[desandro]

See demo https://codepen.io/desandro/pen/wQQyMW

The trick is that you need to set an initial itemSelector to select no items, this way, those initial items are not added and loaded as Masonry items. Then reset itemSelector after init to select proper .grid-item.

      var $grid = $('#grid').masonry({
        // init with no items
        itemSelector: 'NONE',
        percentPosition: true,
        columnWidth: '.grid-sizer',
        gutter: '.gutter-sizer'
      });

      // reset itemSelector to load grid-item
      $grid.masonry( 'option', {
        itemSelector: '.grid-item',
      })

      $grid.masonryImagesReveal( $('#grid').find('.grid-item') ); });

related to original issue #501

[ableslayer]

Thank you. I understand now. This is perfect!