Two Column and Three Column equal and responsive isotope grid

HTML

<script src="http://isotope.metafizzy.co/isotope.pkgd.min.js"></script>
<script src="http://imagesloaded.desandro.com/imagesloaded.pkgd.js"></script>
          <div id="container">
            <div class="home-grid-sizer"></div>
            <div class="home-gutter-sizer"></div>

            <div class="home w5 dodger"></div>
            <div class="home w5 fuel"></div>
            <div class="home w5 indigo"></div>
            <div class="home w5 orange"></div>
            <div class="home w5 indigo"></div>
            <div class="home w5 orange"></div>
            <div class="home w2 orange"></div>
            <div class="home w2 charcoal"></div>
              <div class="home w2 dodger"><img src="" alt="h" /></div>
          </div>

CSS

.home {
    float: left;
    height: 255px;
    margin-bottom: 1%;
    overflow: hidden;
    list-style: none;
}


.home-gutter-sizer { width: 0.56%; }

.home, .home-grid-sizer {width: 1%;}

.home.w5 { width: 48.879%; }
.home.w2 { width: 32.0%; }

.lime {
  background: none repeat scroll 0 0 #6eb92f !important;
  color: white;
}

.fuel {
  background: none repeat scroll 0 0 #d3a102 !important;
  color: white;
}

.indigo {
  background: none repeat scroll 0 0 #ab0092 !important;
  color: white;
}

.dodger {
  background: none repeat scroll 0 0 #008dee !important;
  color: white;
}

.charcoal {
  background: none repeat scroll 0 0 #323232 !important;
  color: white;
}

.orange {
  background: none repeat scroll 0 0 #ff7211 !important;
  color: white;
}

JavaScript

$(document).ready(function() {
    // initialize Isotope
    $container = $('#container').isotope({
      // options
      itemSelector: '.home',
      masonry: {
        columnWidth: '.home-grid-sizer',
        gutter: '.home-gutter-sizer'
      }
    });
    
    $container.imagesLoaded( function() {
      $container.isotope('layout');
    });
    
});