diff --git a/js/packery.js b/js/packery.js
index e84c127..f4f246a 100644
--- a/js/packery.js
+++ b/js/packery.js
@@ -63,7 +63,11 @@ var proto = Packery.prototype;
 proto._create = function() {
   // call super
   Outlayer.prototype._create.call( this );
-
+  //handle gutter
+  if(this.gutter) {
+	this.gutterWidth = this.gutter;
+	this.gutterHeight = this.gutter;
+  }
   // initial properties
   this.packer = new Packer();
   // packer for drop targets
@@ -126,10 +130,10 @@ proto._resetLayout = function() {
   // packer settings, if horizontal or vertical
   if ( this._getOption('horizontal') ) {
     width = Infinity;
-    height = this.size.innerHeight + this.gutter;
+    height = this.size.innerHeight + this.gutterHeight;
     sortDirection = 'rightwardTopToBottom';
   } else {
-    width = this.size.innerWidth + this.gutter;
+    width = this.size.innerWidth + this.gutterWidth;
     height = Infinity;
     sortDirection = 'downwardLeftToRight';
   }
@@ -152,7 +156,8 @@ proto._resetLayout = function() {
 proto._getMeasurements = function() {
   this._getMeasurement( 'columnWidth', 'width' );
   this._getMeasurement( 'rowHeight', 'height' );
-  this._getMeasurement( 'gutter', 'width' );
+  this._getMeasurement( 'gutterWidth', 'width' );
+  this._getMeasurement( 'gutterHeight', 'height' );
 };
 
 proto._getItemLayoutPosition = function( item ) {
@@ -201,8 +206,8 @@ proto._setRectSize = function( elem, rect ) {
   // size for columnWidth and rowHeight, if available
   // only check if size is non-zero, #177
   if ( w || h ) {
-    w = this._applyGridGutter( w, this.columnWidth );
-    h = this._applyGridGutter( h, this.rowHeight );
+    w = this._applyGridGutter( w, this.columnWidth, true );
+    h = this._applyGridGutter( h, this.rowHeight, false );
   }
   // rect must fit in packer
   rect.width = Math.min( w, this.packer.width );
@@ -215,12 +220,13 @@ proto._setRectSize = function( elem, rect ) {
  * @param {Number} gridSize - columnWidth or rowHeight
  * @returns measurement
  */
-proto._applyGridGutter = function( measurement, gridSize ) {
+proto._applyGridGutter = function( measurement, gridSize, isWidth ) {
   // just add gutter if no gridSize
+  var gutter = isWidth ? this.gutterWidth : this.gutterHeight;
   if ( !gridSize ) {
-    return measurement + this.gutter;
+    return measurement + gutter;
   }
-  gridSize += this.gutter;
+  gridSize += gutter;
   // fit item to columnWidth/rowHeight
   var remainder = measurement % gridSize;
   var mathMethod = remainder && remainder < 1 ? 'round' : 'ceil';
@@ -231,11 +237,11 @@ proto._applyGridGutter = function( measurement, gridSize ) {
 proto._getContainerSize = function() {
   if ( this._getOption('horizontal') ) {
     return {
-      width: this.maxX - this.gutter
+      width: this.maxX - this.gutterWidth
     };
   } else {
     return {
-      height: this.maxY - this.gutter
+      height: this.maxY - this.gutterHeight
     };
   }
 };
@@ -373,20 +379,21 @@ proto.resizeShiftPercentLayout = function() {
   var measure = isHorizontal ? 'height' : 'width';
   var segmentName = isHorizontal ? 'rowHeight' : 'columnWidth';
   var innerSize = isHorizontal ? 'innerHeight' : 'innerWidth';
+  var gutter = isHorizontal ? this.gutterHeight : this.gutterWidth;
 
   // proportional re-align items
   var previousSegment = this[ segmentName ];
-  previousSegment = previousSegment && previousSegment + this.gutter;
+  previousSegment = previousSegment && previousSegment + gutter;
 
   if ( previousSegment ) {
     this._getMeasurements();
-    var currentSegment = this[ segmentName ] + this.gutter;
+    var currentSegment = this[ segmentName ] + gutter;
     items.forEach( function( item ) {
       var seg = Math.round( item.rect[ coord ] / previousSegment );
       item.rect[ coord ] = seg * currentSegment;
     });
   } else {
-    var currentSize = getSize( this.element )[ innerSize ] + this.gutter;
+    var currentSize = getSize( this.element )[ innerSize ] + gutter;
     var previousSize = this.packer[ measure ];
     items.forEach( function( item ) {
       item.rect[ coord ] = ( item.rect[ coord ] / previousSize ) * currentSize;
@@ -446,23 +453,24 @@ proto.updateShiftTargets = function( dropItem ) {
   var isHorizontal = this._getOption('horizontal');
   var segmentName = isHorizontal ? 'rowHeight' : 'columnWidth';
   var measure = isHorizontal ? 'height' : 'width';
+  var gutter = isHorizontal ? this.gutterHeight : this.gutterWidth;
 
   this.shiftTargetKeys = [];
   this.shiftTargets = [];
   var boundsSize;
   var segment = this[ segmentName ];
-  segment = segment && segment + this.gutter;
+  segment = segment && segment + gutter;
 
   if ( segment ) {
     var segmentSpan = Math.ceil( dropItem.rect[ measure ] / segment );
-    var segs = Math.floor( ( this.shiftPacker[ measure ] + this.gutter ) / segment );
+    var segs = Math.floor( ( this.shiftPacker[ measure ] + gutter ) / segment );
     boundsSize = ( segs - segmentSpan ) * segment;
     // add targets on top
     for ( var i=0; i < segs; i++ ) {
       this._addShiftTarget( i * segment, 0, boundsSize );
     }
   } else {
-    boundsSize = ( this.shiftPacker[ measure ] + this.gutter ) - dropItem.rect[ measure ];
+    boundsSize = ( this.shiftPacker[ measure ] + gutter ) - dropItem.rect[ measure ];
     this._addShiftTarget( 0, 0, boundsSize );
   }
 
diff --git a/sandbox/gutter.html b/sandbox/gutter.html
new file mode 100644
index 0000000..59e9369
--- /dev/null
+++ b/sandbox/gutter.html
@@ -0,0 +1,88 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width" />
+
+  <title>fluid</title>
+
+  <style>
+  * { box-sizing: border-box; } 
+
+body { font-family: sans-serif; }
+
+/* ---- grid ---- */
+
+.grid {
+  background: #DDD;
+}
+
+/* clear fix */
+.grid:after {
+  content: '';
+  display: block;
+  clear: both;
+}
+
+/* ---- .grid-item ---- */
+
+.grid-item {
+  float: left;
+  width: 32.666666666666%;
+  height: 100px;
+  background: #C09;
+}
+
+.gutter {
+  width: 1%;
+}
+
+.grid-item--width2 { width: 66.333333333334%; }
+.grid-item--height2 { height: 210px; }
+
+  </style>
+
+</head>
+<body>
+
+  <h1>Packery - resize: false</h1>
+
+<div class="container">
+<div class="grid">
+<div class="gutter"></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--width2 grid-item--height2"></div>
+  <div class="grid-item grid-item--width2"></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 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--width2 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"></div>
+</div>
+</div>
+
+
+<script src="../dist/packery.pkgd.js"></script>
+
+<script>
+  var pckry = new Packery( '.grid', {
+	itemSelector: '.grid-item',
+	resize: false,
+	percentPosition: true,
+	gutterWidth: '.gutter',
+	gutterHeight: 10
+  });
+</script>
+
+</body>
+</html>