title: Isotope and DOM Order
body: <p>In this CodePen ( <a href="http://codepen.io/marcamos/pen/LkZByj" rel="nofollow">http://codepen.io/marcamos/pen/LkZByj</a> ) I've set up an Isotope grid of images that are either square, landscape, or portrait, where the landscapes are 2x as wide and the portraits are 2x as tall as the squares. <strong>(Samples of the HTML, CSS, and JS in the CodePen are at the bottom of this post.)</strong></p>
  
  <p>Regardless of viewport width, I'm seeing a blank area above that I <em>thought</em> a square would move right into. See this screenshot: <a href="https://dl.dropboxusercontent.com/u/1851858/Grid_Demo.jpg" rel="nofollow">https://dl.dropboxusercontent.com/u/1851858/Grid_Demo.jpg</a></p>
  
  <p>This strikes me as Isotope being limited by DOM order … which might very well be true, but I <em>thought</em> Isotope's Masonry layout would ignore such things and fill all available space. Am I wrong?</p>
  
  <hr>
  
  <pre><code>&lt;ul class="grid" id="grid"&gt;
    &lt;li class="grid__sizer"&gt;&lt;/li&gt;
    &lt;li class="grid__item grid__item--landscape fadable"&gt;
      &lt;a href="#"&gt;
        &lt;figure&gt;
          &lt;img src="http://noonsharp.design/client/tag/imgs/fpo-square/fpo-2x1.jpg" /&gt; &lt;!-- Landscape --&gt;
          &lt;figcaption class="grid__meta"&gt;
            &lt;span class="grid__project-name"&gt;Project Title&lt;/span&gt;
            &lt;span class="grid__client-name"&gt;Client&lt;/span&gt;
          &lt;/figcaption&gt;
        &lt;/figure&gt;
      &lt;/a&gt;
    &lt;/li&gt;
    &lt;!-- ...and so on... --&gt;
  
  
  .grid__item--square,
  .grid__item--portrait,
  .grid__sizer {
    width: 50%;
  
    @media (min-width:$bp-medium) {
      width: 33.333%;
    }
  }
  
  .grid__item--landscape {
    width: 100%;
  
    @media (min-width:$bp-medium) {
      width: 66.666%;
    }
  }
  &lt;!-- ...and so on... --&gt;
  
  
  var grid = $('.grid').isotope({
    itemSelector: '.grid__item',
    percentPosition: true,
    masonry: {
      columnWidth: '.grid__sizer'
    }
  });
  
  grid.imagesLoaded().progress(function() {
    grid.isotope('layout');
  });
  </code></pre>