grids - separate example code and live example

diff --git a/docs/pages/kitchen-sink.md b/docs/pages/kitchen-sink.md
index 1e97d2d745d005c1d33b729d9e9a816bf1c33f40..993bf999899b1207ba6a0a434fd5f47dc56722fb 100644 (file)
--- a/docs/pages/kitchen-sink.md
+++ b/docs/pages/kitchen-sink.md
@@ -394,7 +394,17 @@ description: Everything but.
 
 ## Flex Grid
 
-```html_example
+```html
+<div class="row">
+  <div class="small-6 columns">6 columns</div>
+  <div class="small-6 columns">6 columns</div>
+</div>
+<div class="row">
+  <div class="medium-6 large-4 columns">12/6/4 columns</div>
+  <div class="medium-6 large-8 columns">12/6/8 columns</div>
+</div>
+```
+
 <div class="row display">
   <div class="small-6 columns">6 columns</div>
   <div class="small-6 columns">6 columns</div>
@@ -403,7 +413,6 @@ description: Everything but.
   <div class="medium-6 large-4 columns">12/6/4 columns</div>
   <div class="medium-6 large-8 columns">12/6/8 columns</div>
 </div>
-```
 
 ---
 
@@ -486,31 +495,55 @@ description: Everything but.
 
 ## Grid
 
-```html_example
+```html
+<div class="row">
+  <div class="small-2 medium-3 large-4 columns">2/3/4 columns</div>
+  <div class="small-4 medium-3 large-4 columns">4/3/4 columns</div>
+  <div class="small-6 large-4 columns">6/6/4 columns</div>
+</div>
+<div class="row">
+  <div class="large-3 columns">12/12/3 columns</div>
+  <div class="large-6 columns">12/12/6 columns</div>
+  <div class="large-3 columns">12/12/3 columns</div>
+</div>
+<div class="row">
+  <div class="small-6 large-2 columns">6/6/2 columns</div>
+  <div class="small-6 large-8 columns">6/6/8 columns</div>
+  <div class="small-12 large-2 columns">12/12/2 columns</div>
+</div>
+<div class="row">
+  <div class="small-3 columns">3 columns</div>
+  <div class="small-9 columns">9 columns</div>
+</div>
+<div class="row">
+  <div class="medium-8 large-4 columns">12/8/4 columns</div>
+  <div class="medium-4 large-8 columns">12/4/8 columns</div>
+</div>
+```
+
 <div class="row display">
-  <div class="small-2 medium-3 large-4 columns">2/3/4</div>
-  <div class="small-4 medium-3 large-4 columns">4/3/4</div>
-  <div class="small-6 large-4 columns">6/6/4</div>
+  <div class="small-2 medium-3 large-4 columns">2/3/4 columns</div>
+  <div class="small-4 medium-3 large-4 columns">4/3/4 columns</div>
+  <div class="small-6 large-4 columns">6/6/4 columns</div>
 </div>
 <div class="row display">
-  <div class="large-3 columns">12/12/3</div>
-  <div class="large-6 columns">12/12/6</div>
-  <div class="large-3 columns">12/12/3</div>
+  <div class="large-3 columns">12/12/3 columns</div>
+  <div class="large-6 columns">12/12/6 columns</div>
+  <div class="large-3 columns">12/12/3 columns</div>
 </div>
 <div class="row display">
-  <div class="small-6 large-2 columns">6/6/2</div>
-  <div class="small-6 large-8 columns">6/6/8</div>
-  <div class="small-12 large-2 columns">12/12/2</div>
+  <div class="small-6 large-2 columns">6/6/2 columns</div>
+  <div class="small-6 large-8 columns">6/6/8 columns</div>
+  <div class="small-12 large-2 columns">12/12/2 columns</div>
 </div>
 <div class="row display">
-  <div class="small-3 columns">3</div>
-  <div class="small-9 columns">9</div>
+  <div class="small-3 columns">3 columns</div>
+  <div class="small-9 columns">9 columns</div>
 </div>
 <div class="row display">
-  <div class="medium-8 large-4 columns">12/8/4</div>
-  <div class="medium-4 large-8 columns">12/4/8</div>
+  <div class="medium-8 large-4 columns">12/8/4 columns</div>
+  <div class="medium-4 large-8 columns">12/4/8 columns</div>
 </div>
-```
 
 ---