砌体：不能消除垂直间隙

Question

我在我的网站上使用砌体。以下是我的HTML：

<div class="grid">
    <div class="grid-sizer"></div>
    <div class="grid-item"><img src="A"></div>
    <div class="grid-item"><img src="B"></div>
    ....many more photos....
</div>

以下是CSS（SASS）：

* {
        @include box-sizing(border-box);
    }
    .grid {
        margin: 0 auto;
    }
    .grid:after {
        content: '';
        display: block;
        clear: both;
    }
    .grid-sizer {
        width: 30%;
    }
    .grid-item {
        float: left;
        width: 30%;
        img {
            display: block;
            max-width: 100%;
        }
    }

我的JavaScript，使用Browserify：

var Masonry = require('masonry-layout');
var docReady = require('doc-ready');
var imagesLoaded = require('imagesloaded');

docReady( function() {
   var grid = document.querySelector('.grid');
   var msnry = new Masonry( grid, {
      itemSelector: '.grid-item',
      columnWidth: '.grid-sizer',
      percentPosition: true
   });
   imagesLoaded( grid, function() {
      msnry.layout();
  });

 });

结果图像中有许多大的垂直间隙。我想我已经在Masonry中显示的示例中复制并粘贴了代码。

感谢您的帮助！