diff --git a/core/src/components/grid/test/preview/index.html b/core/src/components/grid/test/preview/index.html
index 06194c8624..fe12951944 100644
--- a/core/src/components/grid/test/preview/index.html
+++ b/core/src/components/grid/test/preview/index.html
@@ -45,7 +45,7 @@
         <ion-row>
           <ion-col size="6">
             <div>
-              ion-col[width-50]
+              ion-col [size="6"]
             </div>
           </ion-col>
           <ion-col>
@@ -63,7 +63,7 @@
         <ion-row>
           <ion-col size="3">
             <div>
-              ion-col[width-25]
+              ion-col [size="3"]
             </div>
           </ion-col>
           <ion-col>
@@ -73,7 +73,7 @@
           </ion-col>
           <ion-col size="3">
             <div>
-              ion-col[width-25]
+              ion-col [size="3"]
             </div>
           </ion-col>
         </ion-row>
@@ -81,12 +81,12 @@
         <ion-row>
           <ion-col size="3">
             <div>
-              ion-col[width-25]
+              ion-col [size="3"]
             </div>
           </ion-col>
           <ion-col size="3" offset="3">
             <div>
-              ion-col[width-25][offset-25]
+              ion-col [size="3"] [offset="3"]
             </div>
           </ion-col>
         </ion-row>
@@ -123,17 +123,17 @@
         <ion-row>
           <ion-col align-self-start>
             <div>
-              ion-col[top]
+              ion-col [start]
             </div>
           </ion-col>
           <ion-col align-self-center>
             <div>
-              ion-col[center]
+              ion-col [center]
             </div>
           </ion-col>
           <ion-col align-self-end>
             <div>
-              ion-col[bottom]
+              ion-col [end]
             </div>
           </ion-col>
           <ion-col>
@@ -148,17 +148,17 @@
         <ion-row align-items-start>
           <ion-col>
             <div>
-              [top] ion-col
+              [start] ion-col
             </div>
           </ion-col>
           <ion-col>
             <div>
-              [top] ion-col
+              [start] ion-col
             </div>
           </ion-col>
           <ion-col align-self-end>
             <div>
-              [top] ion-col[bottom]
+              [start] ion-col [end]
             </div>
           </ion-col>
           <ion-col>
@@ -198,17 +198,17 @@
         <ion-row align-items-end>
           <ion-col>
             <div>
-              [bottom] ion-col
+              [end] ion-col
             </div>
           </ion-col>
           <ion-col align-self-start>
             <div>
-              [bottom] ion-col[top]
+              [end] ion-col [start]
             </div>
           </ion-col>
           <ion-col>
             <div>
-              [bottom] ion-col
+              [end] ion-col
             </div>
           </ion-col>
           <ion-col>
@@ -221,60 +221,60 @@
         </ion-row>
 
         <ion-row>
-          <ion-col size="12" col-sm>
+          <ion-col size="12" size-sm>
             <div>
-              [responsive-sm] ion-col
+              ion-col [size="12"] [size-sm]
             </div>
           </ion-col>
-          <ion-col size="12" col-sm>
+          <ion-col size="12" size-sm>
             <div>
-              [responsive-sm] ion-col
+              ion-col [size="12"] [size-sm]
             </div>
           </ion-col>
-          <ion-col size="12" col-sm>
+          <ion-col size="12" size-sm>
             <div>
-              [responsive-sm] ion-col
+              ion-col [size="12"] [size-sm]
             </div>
           </ion-col>
-          <ion-col size="12" col-sm>
+          <ion-col size="12" size-sm>
             <div>
-              [responsive-sm] ion-col
+              ion-col [size="12"] [size-sm]
             </div>
           </ion-col>
         </ion-row>
 
         <ion-row>
-          <ion-col size="12" col-md>
+          <ion-col size="12" size-md>
             <div>
-              [responsive-md] ion-col
+              ion-col [size="12"] [size-md]
             </div>
           </ion-col>
-          <ion-col size="12" col-md>
+          <ion-col size="12" size-md>
             <div>
-              [responsive-md] ion-col
+              ion-col [size="12"] [size-md]
             </div>
           </ion-col>
-          <ion-col size="12" col-md>
+          <ion-col size="12" size-md>
             <div>
-              [responsive-md] ion-col
+              ion-col [size="12"] [size-md]
             </div>
           </ion-col>
-          <ion-col size="12" col-md>
+          <ion-col size="12" size-md>
             <div>
-              [responsive-md] ion-col
+              ion-col [size="12"] [size-md]
             </div>
           </ion-col>
         </ion-row>
 
-        <ion-row responsive-lg>
-          <ion-col size="6" offset="3">
+        <ion-row>
+          <ion-col size="6" size-lg offset="3">
             <div>
-              [responsive-lg] ion-col[width-50][offset-25]
+              ion-col [size="6"] [size-lg] [offset="3"]
             </div>
           </ion-col>
-          <ion-col size="3">
+          <ion-col size="3" size-lg>
             <div>
-              [responsive-lg] ion-col[width-25]
+              ion-col [size="3"] [size-lg]
             </div>
           </ion-col>
         </ion-row>
diff --git a/core/src/components/grid/usage/javascript.md b/core/src/components/grid/usage/javascript.md
new file mode 100644
index 0000000000..310eb8d938
--- /dev/null
+++ b/core/src/components/grid/usage/javascript.md
@@ -0,0 +1,179 @@
+```html
+<ion-grid>
+  <ion-row>
+    <ion-col>
+      ion-col
+    </ion-col>
+    <ion-col>
+      ion-col
+    </ion-col>
+    <ion-col>
+      ion-col
+    </ion-col>
+    <ion-col>
+      ion-col
+    </ion-col>
+  </ion-row>
+
+  <ion-row>
+    <ion-col size="6">
+      ion-col [size="6"]
+    </ion-col>
+    <ion-col>
+      ion-col
+    </ion-col>
+    <ion-col>
+      ion-col
+    </ion-col>
+  </ion-row>
+
+  <ion-row>
+    <ion-col size="3">
+      ion-col [size="3"]
+    </ion-col>
+    <ion-col>
+      ion-col
+    </ion-col>
+    <ion-col size="3">
+      ion-col [size="3"]
+    </ion-col>
+  </ion-row>
+
+  <ion-row>
+    <ion-col size="3">
+      ion-col [size="3"]
+    </ion-col>
+    <ion-col size="3" offset="3">
+      ion-col [size="3"] [offset="3"]
+    </ion-col>
+  </ion-row>
+
+  <ion-row>
+    <ion-col>
+      ion-col
+    </ion-col>
+    <ion-col>
+      ion-col
+      <br>#
+    </ion-col>
+    <ion-col>
+      ion-col
+      <br>#
+      <br>#
+    </ion-col>
+    <ion-col>
+      ion-col
+      <br>#
+      <br>#
+      <br>#
+    </ion-col>
+  </ion-row>
+
+  <ion-row>
+    <ion-col align-self-start>
+      ion-col [start]
+    </ion-col>
+    <ion-col align-self-center>
+      ion-col [center]
+    </ion-col>
+    <ion-col align-self-end>
+      ion-col [end]
+    </ion-col>
+    <ion-col>
+      ion-col
+      <br>#
+      <br>#
+    </ion-col>
+  </ion-row>
+
+  <ion-row align-items-start>
+    <ion-col>
+      [start] ion-col
+    </ion-col>
+    <ion-col>
+      [start] ion-col
+    </ion-col>
+    <ion-col align-self-end>
+      [start] ion-col [end]
+    </ion-col>
+    <ion-col>
+      ion-col
+      <br>#
+      <br>#
+    </ion-col>
+  </ion-row>
+
+  <ion-row align-items-center>
+    <ion-col>
+      [center] ion-col
+    </ion-col>
+    <ion-col>
+      [center] ion-col
+    </ion-col>
+    <ion-col>
+      [center] ion-col
+    </ion-col>
+    <ion-col>
+      ion-col
+      <br>#
+      <br>#
+    </ion-col>
+  </ion-row>
+
+  <ion-row align-items-end>
+    <ion-col>
+      [end] ion-col
+    </ion-col>
+    <ion-col align-self-start>
+      [end] ion-col [start]
+    </ion-col>
+    <ion-col>
+      [end] ion-col
+    </ion-col>
+    <ion-col>
+      ion-col
+      <br>#
+      <br>#
+    </ion-col>
+  </ion-row>
+
+  <ion-row>
+    <ion-col size="12" size-sm>
+      ion-col [size="12"] [size-sm]
+    </ion-col>
+    <ion-col size="12" size-sm>
+      ion-col [size="12"] [size-sm]
+    </ion-col>
+    <ion-col size="12" size-sm>
+      ion-col [size="12"] [size-sm]
+    </ion-col>
+    <ion-col size="12" size-sm>
+      ion-col [size="12"] [size-sm]
+    </ion-col>
+  </ion-row>
+
+  <ion-row>
+    <ion-col size="12" size-md>
+      ion-col [size="12"] [size-md]
+    </ion-col>
+    <ion-col size="12" size-md>
+      ion-col [size="12"] [size-md]
+    </ion-col>
+    <ion-col size="12" size-md>
+      ion-col [size="12"] [size-md]
+    </ion-col>
+    <ion-col size="12" size-md>
+      ion-col [size="12"] [size-md]
+    </ion-col>
+  </ion-row>
+
+  <ion-row>
+    <ion-col size="6" size-lg offset="3">
+      ion-col [size="6"] [size-lg] [offset="3"]
+    </ion-col>
+    <ion-col size="3" size-lg>
+      ion-col [size="3"] [size-lg]
+    </ion-col>
+  </ion-row>
+</ion-grid>
+```
\ No newline at end of file