title: Masonry is leaving several gaps
body: <p>I have checked all the posts concerning this topic, but none of the solutions worked for me.</p>
  
  <p>This is what my grid looks like:</p>
  
  <p><a href="https://i.stack.imgur.com/ybufk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ybufk.png" alt="enter image description here"></a></p>
  
  <p>Here is the <a href="https://jsfiddle.net/saitam/Loxfgb74/" rel="nofollow noreferrer"><strong>jsfiddle</strong></a> and here is the code. HTML:</p>
  
  <pre><code>&lt;!-- jQuery --&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;!-- Masonry --&gt;
  &lt;script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="css/style.css"&gt;
  
  
  &lt;!-- imagesLoaded --&gt;
  &lt;script 
  src="https://unpkg.com/imagesloaded@4.1/imagesloaded.pkgd.min.js"&gt;
  
  // init Masonry
  var $grid = $('.grid').masonry({
    itemSelector: '.grid-item',
    percentPosition: true,
    columnWidth: '.grid-sizer'
  });
  // layout Masonry after each image loads
  $grid.imagesLoaded().progress( function() {
    $grid.masonry('layout');
  });
  &lt;/script&gt;
  
  
  &lt;!-- Bootstrap --&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"&gt;
  
  
  &lt;body&gt;
  
    &lt;div class="container"&gt;
  
          &lt;div class="grid"&gt;
  
            &lt;div class="grid-item"&gt;
                &lt;img src="http://hiphopgoldenage.com/wp-content/uploads/2015/10/MellowManAce.jpg" alt="Mellow Man Ace"&gt;
            &lt;/div&gt;
  
            &lt;div class="grid-item"&gt;
                &lt;img src="https://pbs.twimg.com/media/C2O6p6ZWgAA67jA.jpg" alt="..."&gt;
            &lt;/div&gt;
  
            &lt;div class="grid-item"&gt;
                &lt;img src="http://images1.mtv.com/uri/mgid:file:docroot:mtv.com:/shared/promoimages/bands/c/cypres_hill/photos/cr_rene_cervantes/flipbook/CH-0141.jpg?enlarge=false&amp;matte=true&amp;matteColor=black&amp;quality=0.85" alt="..."&gt;
            &lt;/div&gt;
  
            &lt;div class="grid-item"&gt;
                &lt;img src="https://cdn-images-1.medium.com/max/600/1*VfCrfkNhTVwAxftgfebcog.jpeg" alt="..."&gt;
            &lt;/div&gt;
  
            &lt;div class="grid-item"&gt;
                &lt;img src="https://images.genius.com/ace91b03cd16b6f3678660cd184af26a.500x323x1.jpg" alt="..."&gt;
            &lt;/div&gt;
  
            &lt;div class="grid-item"&gt;
                &lt;img src="https://images.pexels.com/photos/271560/pexels-photo-271560.jpeg" alt="..."&gt;
            &lt;/div&gt;
  
            &lt;div class="grid-item"&gt;
                &lt;img src="https://images.pexels.com/photos/147504/pexels-photo-147504.jpeg" alt="..."&gt;
            &lt;/div&gt;
  
            &lt;div class="grid-item"&gt;
                &lt;img src="https://images.pexels.com/photos/99551/hot-air-balloon-valley-sky-99551.jpeg" alt="..."&gt;
            &lt;/div&gt;
  
          &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>* { box-sizing: border-box; }
  
  /* force scrollbar */
  html { overflow-y: scroll; }
  /* body { font-family: sans-serif; } */
  
  /* ---- grid ---- */
  .grid {
    background: #DDD;
  }
  
  /* clear fix */
  .grid:after {
    content: '';
    display: block;
    clear: both;
  }
  
  /* ---- .grid-item ---- */
  .grid-sizer,
  .grid-item {
    width: 33.333%;
    float: left;
  }
  .grid-item img {
    display: block;
    max-width: 100%;
  }
  </code></pre>
  
  <p>What am I doing wring? Please help me.
  Many thanks in advance!</p>