title: Masonry is NOT filling small GAPS
body: <p><strong><a href="http://jsfiddle.net/stanze/ahrzey3g/1/" rel="nofollow">DEMO</a></strong></p>
  
  <p><a href="https://jsfiddle.net/stanze/ahrzey3g/1/embedded/result/" rel="nofollow"><strong>FULL Screen DEMO</strong></a></p>
  
  <p>Masonry is not filling small gaps even if there is space.</p>
  
  <p>Example : 
  Main Container width : 896px;</p>
  
  <p>beside the first container with the orange background, there is a gap where Masonry could add one more container (Orange BG 2nd container), which is not happening. I'm not sure where I'm wrong. :-( </p>
  
  <p>You need to maximize the window to see the issue. </p>
  
  <p><strong>JS :</strong></p>
  
  <pre><code>jQuery(window).load(function() {
              /* var container = document.querySelector('.masonry-container');
              var msnry = new Masonry(container, {
                  itemSelector: '.itemMas',
                  columnWidth: 15,
                  gutter: 1,
                  isFitWidth: true
              }); 
               */
              $ = jQuery;
                  var $container = $('.masonry-container').masonry();
                  var msnry;
                  $container.imagesLoaded( function(){
                      msnry = new Masonry( $container[0], {
                          itemSelector : '.itemMas',
  
                          isAnimated: true,
                          isFitWidth: true
                      });
                  })
           }); 
  </code></pre>