title: isotope and images loaded layout not filling space full width
body: <p>I'm using Isotope and Images Loaded to a create full width grid, which has different height elements <em>(for this example I've kept them the same height)</em>. However I'm having an issue with the grid filling the space full width.</p>
  
  <p>Even though the percents add up they don't line up and I cant figure out why. I'm trying to achieve the following:</p>
  
  <p>| 50% | 30% | 20% |</p>
  
  <p>However the div currently drops at 20% and looks like this:</p>
  
  <p>| 50% | 30% |</p>
  
  <p>| 20% | <em>&lt;--- dropped down but should but above</em></p>
  
  <p>Below is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// init Isotope
  var $grid = $('.grid').isotope({
    itemSelector: '.grid-item',
    percentPosition: true,
    columnWidth: '.grid-sizer'
  });
  // layout Isotope after each image loads
  $grid.imagesLoaded().progress(function() {
    $grid.isotope();
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.grid {
    background: #EEE;
    max-width: 1800px;
    margin: 0 auto;
  }
  
  
  /* clearfix */
  
  .grid:after {
    content: '';
    display: block;
    clear: both;
  }
  
  .grid-item {
    float: left;
  }
  
  .grid-item img {
    display: block;
    max-width: 100%;
  }
  
  
  /* ---- grid-item ---- */
  
  .grid-sizer,
  .grid-item {
    width: 20%;
  }
  
  .grid-item {
    float: left;
    background: #D26;
  }
  
  .grid-item--width2 {
    width: 50%;
    background: blue;
  }
  
  .grid-item--width3 {
    width: 30%;
    background: red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://unpkg.com/imagesloaded@4.1.4/imagesloaded.pkgd.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://unpkg.com/isotope-layout@3.0.5/dist/isotope.pkgd.min.js"&gt;&lt;/script&gt;
  
  &lt;div class="grid"&gt;
    &lt;div class="grid-sizer"&gt;&lt;/div&gt;
    &lt;div class="grid-item grid-item--width2"&gt;
      &lt;img src="http://via.placeholder.com/30x387" alt=""&gt;
    &lt;/div&gt;
    &lt;div class="grid-item grid-item--width3 "&gt;
      &lt;img src="http://via.placeholder.com/30x387" alt=""&gt;
    &lt;/div&gt;
    &lt;div class="grid-item "&gt;
      &lt;img src="http://via.placeholder.com/30x387" alt=""&gt;
    &lt;/div&gt;
    &lt;div class="grid-item "&gt;
      &lt;img src="http://via.placeholder.com/30x387" alt=""&gt;
    &lt;/div&gt;
    &lt;div class="grid-item grid-item--width3 "&gt;
      &lt;img src="http://via.placeholder.com/30x387" alt=""&gt;
    &lt;/div&gt;
    &lt;div class="grid-item "&gt;
      &lt;img src="http://via.placeholder.com/30x387" alt=""&gt;
    &lt;/div&gt;
    &lt;div class="grid-item grid-item--width2 "&gt;
      &lt;img src="http://via.placeholder.com/30x387" alt=""&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>