fixed 'gridWidth' bug

Author: mrtanweijie

dist/index.js

@@ -196,6 +196,10 @@
                         return [];
                     }
                 },
+                gridWidth: {
+                    type: Number,
+                    default: -1
+                },
                 cellWidth: {
                     type: Number,
                     default: 80
@@ -242,6 +246,9 @@
                 }
             },
             computed: {
+                gridResponsiveWidth: function() {
+                    return this.gridWidth < 0 ? this.windowWidth : Math.min(this.windowWidth, this.gridWidth);
+                },
                 height: function() {
                     return Math.ceil(this.items.length / this.rowCount) * this.cellHeight;
                 },
@@ -251,11 +258,11 @@
                     };
                 },
                 rowCount: function() {
-                    return Math.floor(this.windowWidth / this.cellWidth);
+                    return Math.floor(this.gridResponsiveWidth / this.cellWidth);
                 },
                 rowShift: function() {
                     if (this.center) {
-                        var contentWidth = this.items.length * this.cellWidth, rowShift = contentWidth < this.windowWidth ? (this.windowWidth - contentWidth) / 2 : this.windowWidth % this.cellWidth / 2;
+                        var contentWidth = this.items.length * this.cellWidth, rowShift = contentWidth < this.gridResponsiveWidth ? (this.gridResponsiveWidth - contentWidth) / 2 : this.gridResponsiveWidth % this.cellWidth / 2;
                         return Math.floor(rowShift);
                     }
                     return 0;
@@ -494,9 +501,9 @@
             }
         };
     }, function(module, exports, __webpack_require__) {
-        exports = module.exports = __webpack_require__(0)(), exports.push([ module.i, "\nbody {\n  margin: 0;\n  padding: 0;\n}\n.v-grid {\n  display: block;\n  position: relative;\n  width: 100%;\n}\n", "" ]);
+        exports = module.exports = __webpack_require__(0)(), exports.push([ module.i, ".v-grid{display:block;position:relative;width:100%}", "" ]);
     }, function(module, exports, __webpack_require__) {
-        exports = module.exports = __webpack_require__(0)(), exports.push([ module.i, "\n.v-grid-item-wrapper {\n  display: block;\n  position: absolute;\n  box-sizing: border-box;\n  left: 0;\n  top: 0;\n  user-select: none;\n  transform: translate3d(0px, 0px, 0px);\n  z-index: 1;\n}\n.v-grid-item-wrapper.v-grid-item-animate {\n    transition: transform 800ms ease;\n}\n", "" ]);
+        exports = module.exports = __webpack_require__(0)(), exports.push([ module.i, ".v-grid-item-wrapper{display:block;position:absolute;box-sizing:border-box;left:0;top:0;user-select:none;transform:translateZ(0);z-index:1}.v-grid-item-animate{transition:transform .8s ease}", "" ]);
     }, function(module, exports, __webpack_require__) {
         __webpack_require__(14);
         var Component = __webpack_require__(1)(__webpack_require__(5), __webpack_require__(12), null, null);
@@ -561,11 +568,11 @@
     }, function(module, exports, __webpack_require__) {
         var content = __webpack_require__(8);
         "string" == typeof content && (content = [ [ module.i, content, "" ] ]), content.locals && (module.exports = content.locals);
-        __webpack_require__(2)("0a97df14", content, !0);
+        __webpack_require__(2)("105852af", content, !0);
     }, function(module, exports, __webpack_require__) {
         var content = __webpack_require__(9);
         "string" == typeof content && (content = [ [ module.i, content, "" ] ]), content.locals && (module.exports = content.locals);
-        __webpack_require__(2)("4be927ea", content, !0);
+        __webpack_require__(2)("38de0bc4", content, !0);
     }, function(module, exports) {
         module.exports = function(parentId, list) {
             for (var styles = [], newStyles = {}, i = 0; i < list.length; i++) {

src/Grid.vue

@@ -108,15 +108,15 @@ export default {
     },
 
     rowCount () {
-      return Math.floor(this.windowWidth / this.cellWidth)
+      return Math.floor(this.gridResponsiveWidth / this.cellWidth)
     },
 
     rowShift () {
       if (this.center) {
         let contentWidth = this.items.length * this.cellWidth
-        let rowShift = contentWidth < this.windowWidth
-          ? (this.windowWidth - contentWidth) / 2
-          : (this.windowWidth % this.cellWidth) / 2
+        let rowShift = contentWidth < this.gridResponsiveWidth
+          ? (this.gridResponsiveWidth - contentWidth) / 2
+          : (this.gridResponsiveWidth % this.cellWidth) / 2
 
         return Math.floor(rowShift)
       }