title: Auto Sizing Isotope
body: <p>I've been looking at this theme <a href="http://clapat.ro/berger/" rel="nofollow">http://clapat.ro/berger/</a> and the way it does it's grid in the middle of it. I've been snooping through the javascript files and it looks like it's auto sizing the '.item' class based on the width. </p>
  
  <p>I'm trying to replicate this sort of sizing but with my novice understanding of jQuery I can't decipher his code easily or understand the way he's sizing his grid elements automatically.</p>
  
  <p>I've made a little JS Fiddle for myself <a href="http://jsfiddle.net/7L9aey1c/" rel="nofollow">http://jsfiddle.net/7L9aey1c/</a></p>
  
  <pre><code>function MasonryPortfolio() {   
  
      if( $('#portfolio-wrap').length &gt; 0 ){  
  
          var $container = $('#portfolio');
  
          $container.isotope({
            itemSelector: '.item',
            gutter:0,
            transitionDuration: "0.5s"
          });
  
          $(window).on( 'resize', function () {
  
              var winWidth = window.innerWidth;
              columnNumb = 1;         
              var attr_col = $('#portfolio').attr('data-col');
  
               if (winWidth &gt;= 1466) {
  
                  $('#portfolio-wrap').css( {width : 1360  + 'px'});
                  $('#portfolio-wrap.no-gutter').css( {width : 1280  + 'px'});            
                  var portfolioWidth = $('#portfolio-wrap').width();
  
                  if (typeof attr_col !== typeof undefined &amp;&amp; attr_col !== false) {
                      columnNumb = $('#portfolio').attr('data-col');
                  } else columnNumb = 3;
  
                  postWidth = Math.floor(portfolioWidth / columnNumb)         
                  $container.find('.item').each(function () { 
                      $('.item').css( { 
                          width : postWidth - 80 + 'px',
                          height : postWidth * 0.75 - 80 + 'px',
                          margin : 40 + 'px' 
                      });
                      $('.no-gutter .item').css( {
                          width : postWidth  + 'px',
                          height : postWidth * 0.75  + 'px',
                          margin : 0 + 'px' 
                      });
                      $('.item.wide').css( { 
                          width : postWidth * 2 - 80 + 'px'  
                      });
                      $('.no-gutter .item.wide').css( { 
                          width : postWidth * 2 + 'px'  
                      });
                      $('.item.tall').css( {
                          height : postWidth * 1.5 - 80 + 'px'  
                      });
                      $('.no-gutter .item.tall').css( {
                          height : postWidth * 1.5  + 'px'  
                      });
                      $('.item.wide-tall').css( {
                          width : postWidth * 2 - 80 + 'px',
                          height : postWidth * 1.5 - 80 + 'px'  
                      });
                      $('.no-gutter .item.wide-tall').css( {
                          width : postWidth * 2 + 'px',
                          height : postWidth * 1.5  + 'px'  
                      });
                  });
  
  
              } else if (winWidth &gt; 1024) {
  
                  $('#portfolio-wrap').css( {width : 1000  + 'px'});
                  $('#portfolio-wrap.no-gutter').css( {width : 940  + 'px'});         
                  var portfolioWidth = $('#portfolio-wrap').width();
  
                  if (typeof attr_col !== typeof undefined &amp;&amp; attr_col !== false) {
                      columnNumb = $('#portfolio').attr('data-col');
                  } else columnNumb = 3;
  
                  postWidth = Math.floor(portfolioWidth / columnNumb)         
                  $container.find('.item').each(function () { 
                      $('.item').css( { 
                          width : postWidth - 60 + 'px',
                          height : postWidth * 0.75 - 60 + 'px',
                          margin : 30 + 'px' 
                      });
                      $('.no-gutter .item').css( {
                          width : postWidth  + 'px',
                          height : postWidth * 0.75  + 'px',
                          margin : 0 + 'px' 
                      });
                      $('.item.wide').css( { 
                          width : postWidth * 2 - 60 + 'px'  
                      });
                      $('.no-gutter .item.wide').css( { 
                          width : postWidth * 2 + 'px'  
                      });
                      $('.item.tall').css( {
                          height : postWidth * 1.5 - 60 + 'px'  
                      });
                      $('.no-gutter .item.tall').css( {
                          height : postWidth * 1.5  + 'px'  
                      });
                      $('.item.wide-tall').css( {
                          width : postWidth * 2 - 60 + 'px',
                          height : postWidth * 1.5 - 60 + 'px'  
                      });
                      $('.no-gutter .item.wide-tall').css( {
                          width : postWidth * 2 + 'px',
                          height : postWidth * 1.5  + 'px'  
                      });
                  });
  
  
              } else if (winWidth &gt; 767) {
  
                  $('#portfolio-wrap').css( {width : 640  + 'px'});
                  $('#portfolio-wrap.no-gutter').css( {width : 600  + 'px'});
  
                  var portfolioWidth = $('#portfolio-wrap').width(),
  
                  columnNumb = 2;
                  postWidth = Math.floor(portfolioWidth / columnNumb)         
                  $container.find('.item').each(function () { 
                      $('.item').css( { 
                          width : postWidth - 40 + 'px',
                          height : postWidth * 0.75 - 40 + 'px',
                          margin : 20 + 'px' 
                      });
                      $('.no-gutter .item').css( {
                          width : postWidth  + 'px',
                          height : postWidth * 0.75  + 'px',
                          margin : 0 + 'px' 
                      });
                      $('.item.wide').css( { 
                          width : postWidth * 2 - 40 + 'px'  
                      });
                      $('.no-gutter .item.wide').css( { 
                          width : postWidth * 2 + 'px'  
                      });
                      $('.item.tall').css( {
                          height : postWidth * 1.5 - 40 + 'px'  
                      });
                      $('.no-gutter .item.tall').css( {
                          height : postWidth * 1.5  + 'px'  
                      });
                      $('.item.wide-tall').css( {
                          width : postWidth * 2 - 40 + 'px',
                          height : postWidth * 1.5 - 40 + 'px'  
                      });
                      $('.no-gutter .item.wide-tall').css( {
                          width : postWidth * 2 + 'px',
                          height : postWidth * 1.5  + 'px'  
                      });
                  });
  
  
              }   else if (winWidth &gt; 479) {
  
                  $('#portfolio-wrap').css( {width : 440  + 'px'});
                  $('#portfolio-wrap.no-gutter').css( {width : 400  + 'px'});
  
                  var portfolioWidth = $('#portfolio-wrap').width(),
  
                  columnNumb = 1;
                  postWidth = Math.floor(portfolioWidth / columnNumb)         
                  $container.find('.item').each(function () { 
                      $('.item').css( { 
                          width : postWidth - 40 + 'px',
                          height : postWidth * 0.75 - 40 + 'px',
                          margin : 20 + 'px' 
                      });
                      $('.no-gutter .item').css( {
                          width : postWidth  + 'px',
                          height : postWidth * 0.75  + 'px',
                          margin : 0 + 'px' 
                      });
                      $('.item.wide').css( { 
                          width : postWidth - 40 + 'px'  
                      });
                      $('.no-gutter .item.wide').css( { 
                          width : postWidth + 'px'  
                      });
                      $('.item.tall').css( {
                          height : postWidth * 1.5 - 40 + 'px'  
                      });
                      $('.no-gutter .item.tall').css( {
                          height : postWidth * 1.5  + 'px'  
                      });
                      $('.item.wide-tall').css( {
                          width : postWidth - 40 + 'px',
                          height : postWidth * 0.75 - 40 + 'px'  
                      });
                      $('.no-gutter .item.wide-tall').css( {
                          width : postWidth  + 'px',
                          height : postWidth * 0.75  + 'px'  
                      });
                  });
  
  
              }
  
              else if (winWidth &lt;= 479) {
  
                  $('#portfolio-wrap').css( {width : 280  + 'px'});
                  $('#portfolio-wrap.no-gutter').css( {width : 240  + 'px'});
  
                  var portfolioWidth = $('#portfolio-wrap').width(),
  
                  columnNumb = 1;
                  postWidth = Math.floor(portfolioWidth / columnNumb)         
                  $container.find('.item').each(function () { 
                      $('.item').css( { 
                          width : postWidth - 40 + 'px',
                          height : postWidth * 0.75 - 40 + 'px',
                          margin : 20 + 'px' 
                      });
                      $('.no-gutter .item').css( {
                          width : postWidth  + 'px',
                          height : postWidth * 0.75  + 'px',
                          margin : 0 + 'px' 
                      });
                      $('.item.wide').css( { 
                          width : postWidth - 40 + 'px'  
                      });
                      $('.no-gutter .item.wide').css( { 
                          width : postWidth + 'px'  
                      });
                      $('.item.tall').css( {
                          height : postWidth * 1.5 - 40 + 'px'  
                      });
                      $('.no-gutter .item.tall').css( {
                          height : postWidth * 1.5  + 'px'  
                      });
                      $('.item.wide-tall').css( {
                          width : postWidth - 40 + 'px',
                          height : postWidth * 0.75 - 40 + 'px'  
                      });
                      $('.no-gutter .item.wide-tall').css( {
                          width : postWidth + 'px',
                          height : postWidth * 0.75  + 'px'  
                      });
                  });
  
  
              }       
              return columnNumb;
  
  
          }).resize();
  </code></pre>
  
  <p>The Full Source Code (Portfolio Masonry Section) <a href="http://clapat.ro/berger/js/scripts.js" rel="nofollow">http://clapat.ro/berger/js/scripts.js</a></p>
  
  <p>I'm looking for a bit of advice on how to replicate his grid or how to size the elements automatically instead of statically giving each '.item' element a class of 'width2 height2'.</p>