fix(grid): add responsive grid

Author: glopezep

src/components/grid/column.vue

@@ -14,6 +14,22 @@ export default {
     width: {
       type: Number,
       default: 1
+    },
+    lg: {
+      type: Number,
+      default: 0
+    },
+    md: {
+      type: Number,
+      default: 0
+    },
+    sm: {
+      type: Number,
+      default: 0
+    },
+    xs: {
+      type: Number,
+      default: 0
     }
   },
   computed: {
@@ -31,6 +47,10 @@ export default {
     style () {
       const columns = this.$parent.$props.columns
       const gutter = this.$parent.$props.gutter
+      const xs = this.xs ? this.xs : this.width
+      const sm = this.sm ? this.sm : this.width
+      const md = this.md ? this.md : this.width
+      const lg = this.lg ? this.lg : this.width
 
       return {
         '--gutter': `${gutter / 2}px`,
@@ -39,7 +59,15 @@ export default {
         '--margin-left': this.offset ? 'var(--marginLeftB)' : `${gutter / 2}px`,
         '--widthA': `calc(100% / ${columns} * ${this.width}`,
         '--vertical-align': this._verticalAlign,
-        '--widthB': `calc(var(--widthA) - ${gutter}px)`
+        '--widthB': `calc(var(--widthA) - ${gutter}px)`,
+        '--width-xs-pre': `calc(100% / ${columns} * ${xs}`,
+        '--width-xs': `calc(var(--width-xs-pre) - ${gutter}px)`,
+        '--width-sm-pre': `calc(100% / ${columns} * ${sm}`,
+        '--width-sm': `calc(var(--idth-sm-pre) - ${gutter}px)`,
+        '--width-md-pre': `calc(100% / ${columns} * ${md}`,
+        '--width-md': `calc(var(--width-md-pre) - ${gutter}px)`,
+        '--width-lg-pre': `calc(100% / ${columns} * ${lg}`,
+        '--width-lg': `calc(var(--width-lg-pre) - ${gutter}px)`
       }
     }
   }
@@ -61,8 +89,26 @@ export default {
 .w-column {
   align-self: var(--vertical-align);
   box-sizing: border-box;
-  flex: 0 0 var(--widthB);
+  flex: 0 0 var(--width-xs);
   margin: 0 var(--gutter);
   margin-left: var(--margin-left)
 }
+
+@media only screen and (min-width: 768px) {
+  .w-column {
+    flex: 0 0 var(--width-sm);
+  }
+}
+
+@media only screen and (min-width: 992px) {
+  .w-column {
+    flex: 0 0 var(--width-md);
+  }
+}
+
+@media only screen and (min-width: 1200px) {
+  .w-column {
+    flex: 0 0 var(--width-lg);
+  }
+}
 </style>