html/css/js Isotope grid example

isotope.txt

<div class="grid">
  <div class="grid-item grid-item--width2">1</div>
  <div class="grid-item grid-item--height2">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item grid-item--width2 grid-item--height2">5</div>
  <div class="grid-item grid-item--width2">6</div>
  <div class="grid-item grid-item--height2">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
  <div class="grid-item grid-item--width2">10</div>
  <div class="grid-item">11</div>
  <div class="grid-item">12</div>
</div>

<style type="text/css">
  
* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  font-family: sans-serif;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .element-item ---- */

.grid-item {
  position: relative;
  float: left;
  width: 100px;
  height: 100px;
  margin: 5px;
  padding: 10px;
  background: red;
  color: white;
  font-size: 50px;
}

.grid-item--width2 { width: 210px; }
.grid-item--height2 { height: 210px; }

.grid-item:nth-child(10n+0) { background: hsl(   0, 100%, 50%); }
.grid-item:nth-child(10n+1) { background: hsl(  36, 100%, 50%); }
.grid-item:nth-child(10n+2) { background: hsl(  72, 100%, 50%); }
.grid-item:nth-child(10n+3) { background: hsl( 108, 100%, 50%); }
.grid-item:nth-child(10n+4) { background: hsl( 144, 100%, 50%); }
.grid-item:nth-child(10n+5) { background: hsl( 180, 100%, 50%); }
.grid-item:nth-child(10n+6) { background: hsl( 216, 100%, 50%); }
.grid-item:nth-child(10n+7) { background: hsl( 252, 100%, 50%); }
.grid-item:nth-child(10n+8) { background: hsl( 288, 100%, 50%); }
.grid-item:nth-child(10n+9) { background: hsl( 324, 100%, 50%); }

</style>

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="http://isotope.metafizzy.co/isotope.pkgd.js"></script>
<script type="text/javascript" src="https://rawgit.com/metafizzy/isotope-masonry-horizontal/master/masonry-horizontal.js"></script>



<script type="text/javascript">
  // external js: isotope.pkgd.js, cells-by-column.js, cells-by-row.js, fit-columns.js, horizontal.js, masonry-horizontal.js

$(document).ready( function() {
  var $grid = $('.grid').isotope();
  var $this = $(this);
  var isHorizontal    = true;
  var layoutModeValue = "masonryHorizontal";
  $('.grid').isotope({ layoutMode: layoutModeValue });
});  

</script>