<h1>Isotope - packery fluid gutter</h1>

<div class="grid">
  <div class="gutter-sizer"></div>
  <div class="grid-item grid-item--width2"></div>
  <div class="grid-item grid-item--height2"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--height2"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--width2"></div>
  <div class="grid-item grid-item--height2"></div>
  <div class="grid-item grid-item--width2"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--height2"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

* { box-sizing: border-box; }

/* force scroll bar */
html { overflow-y: scroll; }

body { font-family: sans-serif; }

/* ---- grid ---- */

.grid {
  background: #DDD;
}

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

/* ---- .grid-item ---- */

/* 5 columns, percentage width */
.grid-item,
.grid-sizer {
  width: 22%;
}

.grid-item {
  float: left;
  height: 100px;
  background: #0D8;
  border: 2px solid #333;
  border-color: hsla(0, 0%, 0%, 0.7);
}

.gutter-sizer { width: 4%; }

.grid-item--width2 { width: 48%; }
.grid-item--height2 { height: 200px; }

// external js: isotope.pkgd.js, packery-mode.pkgd.js

$('.grid').isotope({
  layoutMode: 'packery',
  itemSelector: '.grid-item',
  percentPosition: true,
  packery: {
    gutter: '.gutter-sizer'
  }
});