title: Using isotope javascript plugin, how can I get rid of gaps?
body: <p>I am trying to build a grid which takes all of the photos that a user has submitted, and lays them out into a neat grid which will reflow with the aspect ratio/resolution of the browser responsively.  </p>
  
  <p>Isotope looks like it's the de facto library for this. I've got everything implemented per one of their demos I viewed, and I'm using two static sizes of images (a portrait resolution of 346x533 and a landscape resolution of 520x347). As the pictures are all the same size or half the height of the other, this should be a nice grid. Problem is, it's not rendering a grid as I would expect at all. Sometimes I'm getting layouts returned which have massive gaps in them, </p>
  
  <p><a href="https://i.stack.imgur.com/EXpv3.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EXpv3.jpg" alt="enter image description here"></a></p>
  
  <pre><code>    HTML:
             &lt;div class="ga"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="gridsa"&gt;
                      &lt;div class="gridsa-sizer"&gt;&lt;/div&gt;
                      &lt;div class="gridsa-item"&gt;
                          &lt;img src="img/tile1.jpg" class="img-port"/&gt;
                      &lt;/div&gt;
                      &lt;div class="gridsa-item"&gt;
                          &lt;img src="img/tile7.jpg" class="img-land"/&gt;
                      &lt;/div&gt;
                      &lt;div class="gridsa-item tile3"&gt;
                          &lt;img src="img/tile3.jpg" class="img-land"/&gt;
                      &lt;/div&gt;
                      &lt;div class="gridsa-item"&gt;
                          &lt;img src="img/tile4.jpg" class="img-land"/&gt;
                      &lt;/div&gt;
                      &lt;div class="gridsa-item"&gt;
                          &lt;img src="img/tile7.jpg" class="img-land"/&gt;
                      &lt;/div&gt;
                      &lt;div class="gridsa-item"&gt;
                          &lt;img src="img/tile6.jpg" class="img-land"/&gt;
                      &lt;/div&gt;
                      &lt;div class="gridsa-item"&gt;
                          &lt;img src="img/tile8.jpg" class="img-land"/&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      CSS
      * { box-sizing: border-box; }
  
  
  
  
      /* ---- isotope ---- */
      .gridsa {
       background: #ffcc33;
       margin: 0px auto;
      }
  
      /* clear fix */
      .gridsa:after {
      content: '';
      display: block;
      clear: both;
      }
      /* ---- .grid-item ---- */
      .gridsa-sizer,
      .gridsa-item {
         width: 33.333%;
       }
  
      .gridsa-item {
      padding:0px;
      float:left;
      }
     .gridsa-item img {
      display: block;
      max-width: 100%;
      position:relative;
  
  
  }
  .gridsa-item h2{
       color:#ffffff;
       position: absolute;
       bottom: 5%;
       left: 33.3%;
       width: 100%;
   }
  
  .gridsa-item.tile2 h2{
      color:#ffffff;
      position: absolute;
      bottom: 1px;
      left: 25%;
      width: 50%;
  }
  
  .gridsa-item.tile3 h2{
      color:#ffffff;
      position: absolute;
      bottom: 1px;
      left: 0;
      width: 80%;
  }
  
  
  
  .ga{
      background-color: #0c5449;
  }
  
      JS
                   &lt;script type="text/javascript"&gt;
                      $( document ).ready(function() {
                      // init Isotope
                          var $grid = $('.gridsa').isotope({
                              itemSelector: '.gridsa-item',
                              percentPosition: true,
                              masonry: {
                                  columnWidth: '.gridsa-sizer'
                              }
                          });
                          // layout Isotope after each image loads
                          $grid.imagesLoaded().progress( function() {
                              $grid.isotope('layout');
                          });
                      });
                  &lt;/script&gt;
  </code></pre>
  
  <p>Here is a jsfiddle of the issue, but you'll need to maximize the window and expand the html section to see the problem. <a href="https://jsfiddle.net/x6dhwh6k/2/" rel="nofollow noreferrer">https://jsfiddle.net/x6dhwh6k/2/</a></p>