title: Using Isotope's smartresize() to make divs fluid
body: <p>I've been stuck for hours on how to implement the <a href="http://isotope.metafizzy.co/v1/demos/fluid-responsive.html" rel="nofollow">$(window).smartresize()</a> function to make my divs fluid. </p>
  
  <p>I used the javascript from this<a href="http://themetrust.com/demos/ink/" rel="nofollow">theme</a> but when I try to implement it myself, my divs do not resize. </p>
  
  <p>I made a simpler page to try to test it and here it is. I ran Chrome Inspector many times through this and it seems that the width is not changing with the resize. I have a feeling it's because I used :before in the CSS but I'm not sure. </p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="thumbs"&gt; 
   &lt;div class="item" style="background-image: url('http://placehold.it/300x225');"&gt; &lt;/div&gt; 
   &lt;div class="item" style="background-image: url('http://placehold.it/300x225');"&gt;&lt;/div&gt;
   &lt;div class="item" style="background-image: url('http://placehold.it/300x225');"&gt; &lt;/div&gt;
   &lt;div class="item" style="background-image: url('http://placehold.it/300x225');"&gt; &lt;/div&gt;
   &lt;div class="item" style="background-image: url('http://placehold.it/300x225');"&gt; &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.item {
   overflow:hidden;
   width:308px;
   float: left;
   position: relative;
   background-size: 100%;
   background-repeat: no-repeat;
  }
  
  .item:after {
   content: "";
   display: block;
   padding-top: 75%;
  }
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>var $gridContainer = $('.thumbs');
  var colW;
  var thumbWidth = 308;
  
  function isotopeInit() {
   setColumns();  
   $gridContainer.isotope({       
    resizable: false,
    layoutMode: 'fitRows',
    masonry: {
     columnWidth: colW
    }
   });    
  }
  
  function setColumns()
  {   
   var columns;
   console.log($gridContainer.width()/thumbWidth);
  
   columns = Math.ceil($gridContainer.width()/thumbWidth);    
   colW = Math.floor($gridContainer.width() / columns);
   $('.item').each(function(id){
    $(this).css('width',colW-gridGutter+'px');
   });
  }
  
  function gridResize() { 
   setColumns();
  
   $gridContainer.isotope({
    resizable: false,
    masonry: {
     columnWidth: colW
    }
   })     
  }
  
  $(window).load(function(){      
   isotopeInit(); 
  
  });
  
  $(window).smartresize(function(){
   gridResize();
  });     
  </code></pre>