diff --git a/packages/docs/docs/layout/README.md b/packages/docs/docs/layout/README.md
index 5c72bc6c..856a3bb0 100644
--- a/packages/docs/docs/layout/README.md
+++ b/packages/docs/docs/layout/README.md
@@ -15,7 +15,7 @@ The following is a brief glimpse of how it works:
 - The column grid system has a value of **1** to **12** to represent its range intervals. For example, `w="4"` can create three columns of equal width (**33.3%**).
 - If the sum of the cabbage segments in a row is greater than **12**, then the overflowing cabbage as a whole will start a new line layout.
 
-With the `w` directive define the column width (vs-col) its value is **1-12**, an example of sizes would be:`12=100%`,`6=50%`,`4=25% `
+With the `w` directive define the column width (vs-col) its value is **1-12**, an example of sizes would be:`12=100%`,`6=50%`,`4=33% `
 
 <div slot="example">
   <grid-default />
@@ -73,7 +73,7 @@ With the `w` directive define the column width (vs-col) its value is **1-12**, a
 
 ## Offset
 
-To give a distance from the left we have the offset property that with the same measurements **1-12** we add the specific space, an example would be: `12=100%`,`6=50%`,`4=25%`.
+To give a distance from the left we have the offset property that with the same measurements **1-12** we add the specific space, an example would be: `12=100%`,`6=50%`,`4=33%`.
 
 <div slot="example">
   <grid-offset />
diff --git a/packages/docs/package-lock.json b/packages/docs/package-lock.json
index 33a4a809..de5693e0 100644
--- a/packages/docs/package-lock.json
+++ b/packages/docs/package-lock.json
@@ -2035,9 +2035,9 @@
       }
     },
     "acorn": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.3.0.tgz",
-      "integrity": "sha512-/czfa8BwS88b9gWQVhc8eknunSA2DoJpJyTQkhheIf5E48u1N0R4q/YxxsAeqRrmK9TQ/uYfgLDfZo91UlANIA==",
+      "version": "6.4.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.1.tgz",
+      "integrity": "sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA==",
       "dev": true
     },
     "agentkeepalive": {
@@ -12363,9 +12363,9 @@
       }
     },
     "websocket-extensions": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.3.tgz",
-      "integrity": "sha512-nqHUnMXmBzT0w570r2JpJxfiSD1IzoI+HGVdd3aZ0yNi3ngvQ4jv1dtHt5VGxfI2yj5yqImPhOK4vmIh2xMbGg=="
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.4.tgz",
+      "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg=="
     },
     "whatwg-fetch": {
       "version": "3.0.0",
diff --git a/packages/vuepress-theme-vuesax/package-lock.json b/packages/vuepress-theme-vuesax/package-lock.json
index 5ca57ed2..24ba2108 100644
--- a/packages/vuepress-theme-vuesax/package-lock.json
+++ b/packages/vuepress-theme-vuesax/package-lock.json
@@ -1402,9 +1402,9 @@
       }
     },
     "acorn": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.3.0.tgz",
-      "integrity": "sha512-/czfa8BwS88b9gWQVhc8eknunSA2DoJpJyTQkhheIf5E48u1N0R4q/YxxsAeqRrmK9TQ/uYfgLDfZo91UlANIA==",
+      "version": "6.4.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.1.tgz",
+      "integrity": "sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA==",
       "dev": true
     },
     "agentkeepalive": {
@@ -10977,9 +10977,9 @@
       }
     },
     "websocket-extensions": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.3.tgz",
-      "integrity": "sha512-nqHUnMXmBzT0w570r2JpJxfiSD1IzoI+HGVdd3aZ0yNi3ngvQ4jv1dtHt5VGxfI2yj5yqImPhOK4vmIh2xMbGg==",
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.4.tgz",
+      "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==",
       "dev": true
     },
     "when": {
diff --git a/packages/vuesax/package-lock.json b/packages/vuesax/package-lock.json
index e172d06e..fe03f55e 100644
--- a/packages/vuesax/package-lock.json
+++ b/packages/vuesax/package-lock.json
@@ -1743,9 +1743,9 @@
       "dev": true
     },
     "acorn": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.3.0.tgz",
-      "integrity": "sha512-/czfa8BwS88b9gWQVhc8eknunSA2DoJpJyTQkhheIf5E48u1N0R4q/YxxsAeqRrmK9TQ/uYfgLDfZo91UlANIA==",
+      "version": "5.7.4",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.7.4.tgz",
+      "integrity": "sha512-1D++VG7BhrtvQpNbBzovKNc1FLGGEE/oGe7b9xJm/RFHMBeUaUGpluV9RLjZa47YFdPcDAenEYuq9pQPcMdLJg==",
       "dev": true
     },
     "acorn-globals": {
@@ -1756,6 +1756,14 @@
       "requires": {
         "acorn": "^6.0.1",
         "acorn-walk": "^6.0.1"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "6.4.1",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.1.tgz",
+          "integrity": "sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA==",
+          "dev": true
+        }
       }
     },
     "acorn-walk": {
@@ -6508,14 +6516,6 @@
         "whatwg-url": "^6.4.1",
         "ws": "^5.2.0",
         "xml-name-validator": "^3.0.0"
-      },
-      "dependencies": {
-        "acorn": {
-          "version": "5.7.3",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.7.3.tgz",
-          "integrity": "sha512-T/zvzYRfbVojPWahDsE5evJdHb3oJoQfFbsrKM7w5Zcs++Tr257tia3BmMP8XYVjp1S9RZXQMh7gao96BlqZOw==",
-          "dev": true
-        }
       }
     },
     "jsesc": {
@@ -10933,6 +10933,14 @@
         "terser-webpack-plugin": "^1.4.1",
         "watchpack": "^1.6.0",
         "webpack-sources": "^1.4.1"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "6.4.1",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.1.tgz",
+          "integrity": "sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA==",
+          "dev": true
+        }
       }
     },
     "webpack-cli": {
diff --git a/packages/vuesax/src/layout/grid/VsCol.ts b/packages/vuesax/src/layout/grid/VsCol.ts
index 7fa14cdb..c84da6aa 100644
--- a/packages/vuesax/src/layout/grid/VsCol.ts
+++ b/packages/vuesax/src/layout/grid/VsCol.ts
@@ -21,12 +21,18 @@ export default class VsCol extends Vue {
 
   @Prop({ type: [String, Number], default: '0' }) public xs!: string | number
 
+  @Prop({ type: String, default: 'block' }) public type!: string
+
+  @Prop({ type: String, default: 'flex-start' }) public justify!: string
+
   public render(h: any): VNode {
 
     const vsCol = h('div', {
       staticClass: 'vs-col',
       style: {
-        order: this.order
+        order: this.order,
+        display: this.type,
+        justifyContent: this.justify,
       },
       class: [
         `vs-col--w-${this.w}`,