diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..a2eb533
Binary files /dev/null and b/.DS_Store differ
diff --git a/.gitignore b/.gitignore
index c09ffa6..3b21614 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
 .idea
+.DS_Store
 
 node_modules
\ No newline at end of file
diff --git a/dist/magic-grid.cjs.js b/dist/magic-grid.cjs.js
index 0a4c4d4..f14c4f4 100644
--- a/dist/magic-grid.cjs.js
+++ b/dist/magic-grid.cjs.js
@@ -141,7 +141,7 @@ MagicGrid.prototype.colWidth = function colWidth () {
 MagicGrid.prototype.setup = function setup () {
   var width = this.container.getBoundingClientRect().width;
   var colWidth = this.colWidth();
-  var numCols = Math.floor(width/colWidth) || 1;
+  var numCols = Math.floor((width + this.gutter)/colWidth) || 1;
   var cols = [];
 
   if (this.maxColumns && numCols > this.maxColumns) {
diff --git a/dist/magic-grid.esm.js b/dist/magic-grid.esm.js
index 86df419..afea939 100644
--- a/dist/magic-grid.esm.js
+++ b/dist/magic-grid.esm.js
@@ -139,7 +139,7 @@ MagicGrid.prototype.colWidth = function colWidth () {
 MagicGrid.prototype.setup = function setup () {
   var width = this.container.getBoundingClientRect().width;
   var colWidth = this.colWidth();
-  var numCols = Math.floor(width/colWidth) || 1;
+  var numCols = Math.floor((width + this.gutter)/colWidth) || 1;
   var cols = [];
 
   if (this.maxColumns && numCols > this.maxColumns) {
diff --git a/dist/magic-grid.min.js b/dist/magic-grid.min.js
index f069e5c..70ca2ec 100644
--- a/dist/magic-grid.min.js
+++ b/dist/magic-grid.min.js
@@ -1 +1 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.MagicGrid=e()}(this,function(){"use strict";var t=function(t){var i=["useTransform","center"];if(!t)throw new Error("No config object has been provided.");for(var n of i)"boolean"!=typeof t[n]&&(t[n]=!0);"number"!=typeof t.gutter&&(t.gutter=25),t.container||e("container"),t.items||t.static||e("items or static")},e=function(t){throw new Error("Missing property '"+t+"' in MagicGrid config")},i=function(t){var e=t[0];for(var i of t)i.height<e.height&&(e=i);return e},n=function(e){t(e),e.container instanceof HTMLElement?(this.container=e.container,this.containerClass=e.container.className):(this.containerClass=e.container,this.container=document.querySelector(e.container)),this.items=this.container.children,this.static=e.static||!1,this.size=e.items,this.gutter=e.gutter,this.maxColumns=e.maxColumns||!1,this.useMin=e.useMin||!1,this.useTransform=e.useTransform,this.animate=e.animate||!1,this.started=!1,this.center=e.center,this.init()};return n.prototype.init=function(){if(this.ready()&&!this.started){this.container.style.position="relative";for(var t=0;t<this.items.length;t++){var e=this.items[t].style;e.position="absolute",this.animate&&(e.transition=(this.useTransform?"transform":"top, left")+" 0.2s ease")}this.started=!0}},n.prototype.colWidth=function(){return this.items[0].getBoundingClientRect().width+this.gutter},n.prototype.setup=function(){var t=this.container.getBoundingClientRect().width,e=this.colWidth(),i=Math.floor(t/e)||1,n=[];this.maxColumns&&i>this.maxColumns&&(i=this.maxColumns);for(var s=0;s<i;s++)n[s]={height:0,index:s};return{cols:n,wSpace:t-i*e+this.gutter}},n.prototype.nextCol=function(t,e){return this.useMin?i(t):t[e%t.length]},n.prototype.positionItems=function(){var t=this.setup(),e=t.cols,i=t.wSpace,n=0,s=this.colWidth();i=this.center?Math.floor(i/2):0;for(var o=0;o<this.items.length;o++){var r=this.nextCol(e,o),a=this.items[o],h=r.height?this.gutter:0,c=r.index*s+i+"px",u=r.height+h+"px";this.useTransform?a.style.transform="translate("+c+", "+u+")":(a.style.top=u,a.style.left=c),r.height+=a.getBoundingClientRect().height+h,r.height>n&&(n=r.height)}this.container.style.height=n+this.gutter+"px"},n.prototype.ready=function(){return!!this.static||this.items.length>=this.size},n.prototype.getReady=function(){var t=this,e=setInterval(function(){t.container=document.querySelector(t.containerClass),t.items=t.container.children,t.ready()&&(clearInterval(e),t.init(),t.listen())},100)},n.prototype.listen=function(){var t=this;if(this.ready()){var e;window.addEventListener("resize",function(){e||(e=setTimeout(function(){t.positionItems(),e=null},200))}),this.positionItems()}else this.getReady()},n});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.MagicGrid=e()}(this,function(){"use strict";var t=function(t){var i=["useTransform","center"];if(!t)throw new Error("No config object has been provided.");for(var n of i)"boolean"!=typeof t[n]&&(t[n]=!0);"number"!=typeof t.gutter&&(t.gutter=25),t.container||e("container"),t.items||t.static||e("items or static")},e=function(t){throw new Error("Missing property '"+t+"' in MagicGrid config")},i=function(t){var e=t[0];for(var i of t)i.height<e.height&&(e=i);return e},n=function(e){t(e),e.container instanceof HTMLElement?(this.container=e.container,this.containerClass=e.container.className):(this.containerClass=e.container,this.container=document.querySelector(e.container)),this.items=this.container.children,this.static=e.static||!1,this.size=e.items,this.gutter=e.gutter,this.maxColumns=e.maxColumns||!1,this.useMin=e.useMin||!1,this.useTransform=e.useTransform,this.animate=e.animate||!1,this.started=!1,this.center=e.center,this.init()};return n.prototype.init=function(){if(this.ready()&&!this.started){this.container.style.position="relative";for(var t=0;t<this.items.length;t++){var e=this.items[t].style;e.position="absolute",this.animate&&(e.transition=(this.useTransform?"transform":"top, left")+" 0.2s ease")}this.started=!0}},n.prototype.colWidth=function(){return this.items[0].getBoundingClientRect().width+this.gutter},n.prototype.setup=function(){var t=this.container.getBoundingClientRect().width,e=this.colWidth(),i=Math.floor((t+this.gutter)/e)||1,n=[];this.maxColumns&&i>this.maxColumns&&(i=this.maxColumns);for(var s=0;s<i;s++)n[s]={height:0,index:s};return{cols:n,wSpace:t-i*e+this.gutter}},n.prototype.nextCol=function(t,e){return this.useMin?i(t):t[e%t.length]},n.prototype.positionItems=function(){var t=this.setup(),e=t.cols,i=t.wSpace,n=0,s=this.colWidth();i=this.center?Math.floor(i/2):0;for(var o=0;o<this.items.length;o++){var r=this.nextCol(e,o),a=this.items[o],h=r.height?this.gutter:0,c=r.index*s+i+"px",u=r.height+h+"px";this.useTransform?a.style.transform="translate("+c+", "+u+")":(a.style.top=u,a.style.left=c),r.height+=a.getBoundingClientRect().height+h,r.height>n&&(n=r.height)}this.container.style.height=n+this.gutter+"px"},n.prototype.ready=function(){return!!this.static||this.items.length>=this.size},n.prototype.getReady=function(){var t=this,e=setInterval(function(){t.container=document.querySelector(t.containerClass),t.items=t.container.children,t.ready()&&(clearInterval(e),t.init(),t.listen())},100)},n.prototype.listen=function(){var t=this;if(this.ready()){var e;window.addEventListener("resize",function(){e||(e=setTimeout(function(){t.positionItems(),e=null},200))}),this.positionItems()}else this.getReady()},n});
diff --git a/src/index.js b/src/index.js
index 200a765..eeb7fc1 100644
--- a/src/index.js
+++ b/src/index.js
@@ -88,7 +88,7 @@ class MagicGrid {
   setup () {
     let width = this.container.getBoundingClientRect().width;
     let colWidth = this.colWidth();
-    let numCols = Math.floor(width/colWidth) || 1;
+    let numCols = Math.floor((width + this.gutter)/colWidth) || 1;
     let cols = [];
 
     if (this.maxColumns && numCols > this.maxColumns) {
diff --git a/test/grid-responsive.html b/test/grid-responsive.html
new file mode 100644
index 0000000..369ab3c
--- /dev/null
+++ b/test/grid-responsive.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+
+  <meta charset="UTF-8">
+  <title>Magic Grid</title>
+
+  <style>
+    .container div {
+      width: 1200px;
+      height: 500px;
+      background-color: antiquewhite;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-radius: 8px;
+    }
+
+    /* 2 column */
+    .container .item {
+      background-color: wheat;
+
+      /* (100% - (1 gutter * gutter size)) / numCols */
+      width: calc((100% - 25px) / 2);
+    }
+
+    /* 4 column */
+    @media only screen and (min-width: 768px) {
+      .container .item {
+        /* (100% - (3 gutters * gutter size)) / numCols */
+        width: calc((100% - (3 * 25px)) / 4);
+      }
+    }
+
+    .container .item1 { height: 200px; }
+    .container .item4 { height: 800px; }
+    .container .item6 { height: 600px; }
+    .container .item11 { height: 400px; }
+  </style>
+
+</head>
+<body>
+
+  <div class="container">
+    <div class="item item1">1</div>
+    <div class="item item2">2</div>
+    <div class="item item3">3</div>
+    <div class="item item4">4</div>
+    <div class="item item5">5</div>
+    <div class="item item6">6</div>
+    <div class="item item7">7</div>
+    <div class="item item8">8</div>
+    <div class="item item9">9</div>
+    <div class="item item10">10</div>
+    <div class="item item11">11</div>
+    <div class="item item12">12</div>
+    <div class="item item13">13</div>
+  </div>
+
+  <script src="../dist/magic-grid.min.js"></script>
+  <script>
+      let magicGrid = new MagicGrid({
+        container: '.container',
+        animate: true,
+        gutter: 25,
+        static: true,
+        useMin: true
+      });
+
+      magicGrid.listen();
+  </script>
+
+</body>
+</html>