diff --git a/demos/component-docs/app.scss b/demos/component-docs/app.scss
index a4110fb44e..447709ef8f 100644
--- a/demos/component-docs/app.scss
+++ b/demos/component-docs/app.scss
@@ -14,6 +14,7 @@ $font-path: '../../dist/fonts';
 @import "cards/background/styles";
 @import "cards/advanced-weather/styles";
 @import "cards/advanced-map/styles";
+@import "grid/basic/styles";
 @import "icons/basic/styles";
 @import "menus/basic/styles";
 @import "slides/basic/styles";
diff --git a/demos/component-docs/grid/basic/pages.ts b/demos/component-docs/grid/basic/pages.ts
new file mode 100644
index 0000000000..3cfc810dd0
--- /dev/null
+++ b/demos/component-docs/grid/basic/pages.ts
@@ -0,0 +1,13 @@
+import {Page} from 'ionic/ionic';
+import {forwardRef} from 'angular2/angular2';
+import {AndroidAttribute} from '../../helpers';
+
+@Page({
+    templateUrl: 'grid/basic/template.html',
+    directives: [forwardRef(() => AndroidAttribute)]
+})
+export class BasicPage {
+    constructor() {
+
+    }
+}
diff --git a/demos/component-docs/grid/basic/styles.scss b/demos/component-docs/grid/basic/styles.scss
new file mode 100644
index 0000000000..9f78ded3a3
--- /dev/null
+++ b/demos/component-docs/grid/basic/styles.scss
@@ -0,0 +1,11 @@
+.grid-page {
+  
+  ion-col div {
+    background-color: #F9FAFB;
+    padding: 5px;
+    border: 1px solid #ddd;
+    border-radius: 2px;
+    text-align: center;
+  }
+  
+}
diff --git a/demos/component-docs/grid/basic/template.html b/demos/component-docs/grid/basic/template.html
new file mode 100644
index 0000000000..e26b954bd2
--- /dev/null
+++ b/demos/component-docs/grid/basic/template.html
@@ -0,0 +1,66 @@
+
+<ion-navbar *navbar hide-back-button class="show-navbar android-attr">
+  <ion-title>Grid</ion-title>
+</ion-navbar>
+
+<ion-content class="has-header grid-page">
+  <ion-row>
+    <ion-col><div>col</div></ion-col>
+    <ion-col><div>col</div></ion-col>
+    <ion-col><div>col</div></ion-col>
+    <ion-col>
+      <div>
+        col<br>
+        3 lines<br>
+        of text<br>
+      </div>
+    </ion-col>
+  </ion-row>
+
+  <ion-row center>
+    <ion-col><div>col</div></ion-col>
+    <ion-col><div>col</div></ion-col>
+    <ion-col><div>col</div></ion-col>
+    <ion-col>
+      <div>
+        col<br>
+        3 lines<br>
+        center<br>
+      </div>
+    </ion-col>
+  </ion-row>
+
+  <ion-row center>
+    <ion-col class="col-offset-25"><div>col</div></ion-col>
+    <ion-col><div>col</div></ion-col>
+    <ion-col>
+      <div>
+        col<br>
+        3 lines<br>
+        center<br>
+      </div>
+    </ion-col>
+  </ion-row>
+
+  <ion-row baseline>
+    <ion-col class="col-offset-50"><div>col</div></ion-col>
+    <ion-col>
+      <div>
+        col<br>
+        3 lines<br>
+        baseline<br>   
+      </div>
+    </ion-col>
+  </ion-row>
+
+  <ion-row baseline>
+    <ion-col class="col-offset-75">
+      <div>
+        col<br>
+        2 lines<br>
+      </div>
+    </ion-col>
+  </ion-row>
+
+
+</ion-content>
diff --git a/demos/component-docs/grid/grid.ts b/demos/component-docs/grid/grid.ts
new file mode 100644
index 0000000000..ebdd570b29
--- /dev/null
+++ b/demos/component-docs/grid/grid.ts
@@ -0,0 +1 @@
+export * from './basic/pages';
diff --git a/demos/component-docs/helpers.ts b/demos/component-docs/helpers.ts
index ef53b5e8fb..794db5955b 100644
--- a/demos/component-docs/helpers.ts
+++ b/demos/component-docs/helpers.ts
@@ -4,6 +4,7 @@ import {Platform, Navbar} from 'ionic/ionic';
 import * as actionSheets from './action-sheets/action-sheets';
 import * as buttons from './buttons/buttons';
 import * as cards from './cards/cards';
+import * as grid from './grid/grid';
 import * as labels from './labels/labels';
 import * as icons from './icons/icons';
 import * as inputs from './inputs/inputs';
@@ -108,6 +109,7 @@ export function getPageFor(hash) {
         'stacked-labels': labels.StackedPage,
 
         'icons': icons.BasicPage,
+        'grid': grid.BasicPage,
 
         'lists': lists.BasicPage,
         'list-lines': lists.BasicPage,