From df6f6278056e36eb2b1ec26ebf53510cfe780efc Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Wed, 23 Aug 2017 16:11:18 -0400
Subject: [PATCH] Make crappy docs example a little easier to see

---
 docs/source/grid.md | 50 ++++++++++++++++++++++++++++++++++-----------
 1 file changed, 38 insertions(+), 12 deletions(-)

diff --git a/docs/source/grid.md b/docs/source/grid.md
index af83c48db..4e3045d9f 100644
--- a/docs/source/grid.md
+++ b/docs/source/grid.md
@@ -133,28 +133,48 @@ Fixed width columns are still respected even if a smaller screen has auto column
 
 <div class="flex mb-6">
     <div class="flex-fill md:w-1/6 md:flex-none">
-        <div class="flex-center h-16 bg-dark-softer text-light">
-            .flex-fill.md:w-1/6.md:flex-none
+        <div class="flex-center h-24 bg-dark-softer text-light">
+            <div>
+                <div>.flex-fill</div>
+                <div>.md:w-1/6</div>
+                <div>.md:flex-none</div>
+            </div>
         </div>
     </div>
     <div class="flex-fill md:w-1/6 md:flex-none">
-        <div class="flex-center h-16 bg-dark-soft text-light">
-            .flex-fill.md:w-1/6.md:flex-none
+        <div class="flex-center h-24 bg-dark-soft text-light">
+            <div>
+                <div>.flex-fill</div>
+                <div>.md:w-1/6</div>
+                <div>.md:flex-none</div>
+            </div>
         </div>
     </div>
     <div class="flex-fill md:w-1/6 md:flex-none">
-        <div class="flex-center h-16 bg-dark-softer text-light">
-            .flex-fill.md:w-1/6.md:flex-none
+        <div class="flex-center h-24 bg-dark-softer text-light">
+            <div>
+                <div>.flex-fill</div>
+                <div>.md:w-1/6</div>
+                <div>.md:flex-none</div>
+            </div>
         </div>
     </div>
     <div class="flex-fill md:w-1/6 md:flex-none">
-        <div class="flex-center h-16 bg-dark-soft text-light">
-            .flex-fill.md:w-1/6.md:flex-none
+        <div class="flex-center h-24 bg-dark-soft text-light">
+            <div>
+                <div>.flex-fill</div>
+                <div>.md:w-1/6</div>
+                <div>.md:flex-none</div>
+            </div>
         </div>
     </div>
     <div class="flex-fill md:w-1/6 md:flex-none">
-        <div class="flex-center h-16 bg-dark-softer text-light">
-            .flex-fill.md:w-1/6.md:flex-none
+        <div class="flex-center h-24 bg-dark-softer text-light">
+            <div>
+                <div>.flex-fill</div>
+                <div>.md:w-1/6</div>
+                <div>.md:flex-none</div>
+            </div>
         </div>
     </div>
 </div>
@@ -165,12 +185,18 @@ Use margin auto utilities to accomplish offsets:
 <div class="flex mb-6">
     <div class="w-full md:w-1/3 md:ml-auto">
         <div class="flex-center h-16 bg-dark-soft text-light">
-            .md:w-1/3.md:ml-auto
+            <div>
+                <div>.md:w-1/3</div>
+                <div>.md:ml-auto</div>
+            </div>
         </div>
     </div>
     <div class="w-full md:w-1/3 md:mr-auto">
         <div class="flex-center h-16 bg-dark-softer text-light">
-            .md:w-1/6.md:mr-auto
+            <div>
+                <div>.md:w-1/6</div>
+                <div>.md:mr-auto</div>
+            </div>
         </div>
     </div>
 </div>