title: Masonry: Can't eliminate vertical gap
body: <p>I am using Masonry in my site. The following is my HTML :</p>
  
  <pre><code>&lt;div class="grid"&gt;
      &lt;div class="grid-sizer"&gt;&lt;/div&gt;
      &lt;div class="grid-item"&gt;&lt;img src="A"&gt;&lt;/div&gt;
      &lt;div class="grid-item"&gt;&lt;img src="B"&gt;&lt;/div&gt;
      ....many more photos....
  &lt;/div&gt;
  </code></pre>
  
  <p>The following is the CSS (SASS) :</p>
  
  <pre><code>* {
          @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%;
          }
      }
  </code></pre>
  
  <p>My JavaScript, using Browserify :</p>
  
  <pre><code>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();
    });
  
   });
  </code></pre>
  
  <p>There are many large vertical gaps in the resulting images. I think I have already copied and pasted the code in the example shown in Masonry.</p>
  
  <p>Thanks for any help!</p>