diff --git a/src/components/grid/grid.mixins.scss b/src/components/grid/grid.mixins.scss
index 2ceab3c0d3..a19eb5b805 100644
--- a/src/components/grid/grid.mixins.scss
+++ b/src/components/grid/grid.mixins.scss
@@ -12,6 +12,10 @@
   margin-right: auto;
   width: 100%;
 
+  display: flex;
+
+  flex-direction: column;
+
   // Remove the padding from the grid and all immediate children columns
   &[no-padding] {
     padding: 0;
diff --git a/src/components/grid/test/alignment/main.html b/src/components/grid/test/alignment/main.html
index e5e30cbea1..b2ef79a42e 100644
--- a/src/components/grid/test/alignment/main.html
+++ b/src/components/grid/test/alignment/main.html
@@ -48,7 +48,7 @@
     <ion-col>
       <button ion-button small>Button 1</button>
     </ion-col>
-    <ion-col width-50 text-center>
+    <ion-col col-6 text-center>
       <button ion-button small>Button 2</button>
       <button ion-button small>Button 3</button>
     </ion-col>
diff --git a/src/components/grid/test/basic/pages/root-page/root-page.html b/src/components/grid/test/basic/pages/root-page/root-page.html
index a08cf3adfd..af205bb302 100644
--- a/src/components/grid/test/basic/pages/root-page/root-page.html
+++ b/src/components/grid/test/basic/pages/root-page/root-page.html
@@ -33,7 +33,7 @@
     </ion-row>
 
     <ion-row>
-      <ion-col width-50>
+      <ion-col col-6>
         <div>
           ion-col[width-50]
         </div>
@@ -51,7 +51,7 @@
     </ion-row>
 
     <ion-row>
-      <ion-col width-25>
+      <ion-col col-3>
         <div>
           ion-col[width-25]
         </div>
@@ -61,7 +61,7 @@
           ion-col
         </div>
       </ion-col>
-      <ion-col width-25>
+      <ion-col col-3>
         <div>
           ion-col[width-25]
         </div>
@@ -69,12 +69,12 @@
     </ion-row>
 
     <ion-row>
-      <ion-col width-25>
+      <ion-col col-3>
         <div>
           ion-col[width-25]
         </div>
       </ion-col>
-      <ion-col width-25 offset-25>
+      <ion-col col-3 offset-3>
         <div>
           ion-col[width-25][offset-25]
         </div>
@@ -105,17 +105,17 @@
     </ion-row>
 
     <ion-row>
-      <ion-col top>
+      <ion-col align-self-start>
         <div>
           ion-col[top]
         </div>
       </ion-col>
-      <ion-col center>
+      <ion-col align-self-center>
         <div>
           ion-col[center]
         </div>
       </ion-col>
-      <ion-col bottom>
+      <ion-col align-self-end>
         <div>
           ion-col[bottom]
         </div>
@@ -127,7 +127,7 @@
       </ion-col>
     </ion-row>
 
-    <ion-row top>
+    <ion-row align-items-start>
       <ion-col>
         <div>
           [top] ion-col
@@ -138,7 +138,7 @@
           [top] ion-col
         </div>
       </ion-col>
-      <ion-col bottom>
+      <ion-col align-self-end>
         <div>
           [top] ion-col[bottom]
         </div>
@@ -150,7 +150,7 @@
       </ion-col>
     </ion-row>
 
-    <ion-row center>
+    <ion-row align-items-center>
       <ion-col>
         <div>
           [center] ion-col
@@ -173,13 +173,13 @@
       </ion-col>
     </ion-row>
 
-    <ion-row bottom>
+    <ion-row align-items-end>
       <ion-col>
         <div>
           [bottom] ion-col
         </div>
       </ion-col>
-      <ion-col top>
+      <ion-col align-self-start>
         <div>
           [bottom] ion-col[top]
         </div>
@@ -196,46 +196,46 @@
       </ion-col>
     </ion-row>
 
-    <ion-row responsive-sm>
-      <ion-col>
+    <ion-row>
+      <ion-col col-12 col-sm>
         <div>
           [responsive-sm] ion-col
         </div>
       </ion-col>
-      <ion-col>
+      <ion-col col-12 col-sm>
         <div>
           [responsive-sm] ion-col
         </div>
       </ion-col>
-      <ion-col>
+      <ion-col col-12 col-sm>
         <div>
           [responsive-sm] ion-col
         </div>
       </ion-col>
-      <ion-col>
+      <ion-col col-12 col-sm>
         <div>
           [responsive-sm] ion-col
         </div>
       </ion-col>
     </ion-row>
 
-    <ion-row responsive-md>
-      <ion-col>
+    <ion-row>
+      <ion-col col-12 col-md>
         <div>
           [responsive-md] ion-col
         </div>
       </ion-col>
-      <ion-col>
+      <ion-col col-12 col-md>
         <div>
           [responsive-md] ion-col
         </div>
       </ion-col>
-      <ion-col>
+      <ion-col col-12 col-md>
         <div>
           [responsive-md] ion-col
         </div>
       </ion-col>
-      <ion-col>
+      <ion-col col-12 col-md>
         <div>
           [responsive-md] ion-col
         </div>
@@ -243,12 +243,12 @@
     </ion-row>
 
     <ion-row responsive-lg>
-      <ion-col width-50 offset-25>
+      <ion-col col-6 offset-3>
         <div>
           [responsive-lg] ion-col[width-50][offset-25]
         </div>
       </ion-col>
-      <ion-col width-25>
+      <ion-col col-3>
         <div>
           [responsive-lg] ion-col[width-25]
         </div>
diff --git a/src/components/popover/test/basic/pages/page-one/page-one.html b/src/components/popover/test/basic/pages/page-one/page-one.html
index 21a2cebe22..13fdc338d3 100644
--- a/src/components/popover/test/basic/pages/page-one/page-one.html
+++ b/src/components/popover/test/basic/pages/page-one/page-one.html
@@ -33,10 +33,10 @@
 
   <ion-grid style="padding: 10px 0;">
     <ion-row>
-      <ion-col width-50>
+      <ion-col col-6>
         <a (click)="presentListPopover($event)" style="padding: 5px;">Present List Popover left</a>
       </ion-col>
-      <ion-col width-50 style="text-align: right;">
+      <ion-col col-6 style="text-align: right;">
         <a (click)="presentListPopover($event)" style="padding: 5px;">Present List Popover right</a>
       </ion-col>
     </ion-row>