diff --git a/docs/source/grid.md b/docs/source/grid.md
index 4e3045d9f..3ca07b146 100644
--- a/docs/source/grid.md
+++ b/docs/source/grid.md
@@ -7,40 +7,46 @@ title: "Grid"
 
 Basic grid example:
 
-<div class="flex mb-6">
-    <div class="w-full md:w-1/3">
-        <div class="flex-center h-16 bg-dark-softer text-light">
-            .md:w-1/3
+<div class="bg-light-softer text-medium text-sm py-4 mb-6">
+    <div class="text-dark-soft mb-2 px-4 leading-none">.flex.flex-wrap</div>
+    <div class="flex flex-wrap">
+        <div class="w-full md:w-1/3">
+            <div class="text-center py-4 bg-dark-softer text-light">
+                .md:w-1/3
+            </div>
         </div>
-    </div>
-    <div class="w-full md:w-1/3">
-        <div class="flex-center h-16 bg-dark-soft text-light">
-            .md:w-1/3
+        <div class="w-full md:w-1/3">
+            <div class="text-center py-4 bg-dark-soft text-light">
+                .md:w-1/3
+            </div>
         </div>
-    </div>
-    <div class="w-full md:w-1/3">
-        <div class="flex-center h-16 bg-dark-softer text-light">
-            .md:w-1/3
+        <div class="w-full md:w-1/3">
+            <div class="text-center py-4 bg-dark-softer text-light">
+                .md:w-1/3
+            </div>
         </div>
     </div>
 </div>
 
 Columns don't need to fill a row:
 
-<div class="flex mb-6">
-    <div class="w-full md:w-1/4">
-        <div class="flex-center h-16 bg-dark-softer text-light">
-            .md:w-1/4
+<div class="bg-light-softer text-medium text-sm py-4 mb-6">
+    <div class="text-dark-soft mb-2 px-4 leading-none">.flex</div>
+    <div class="flex flex-wrap">
+        <div class="w-full md:w-1/4">
+            <div class="text-center py-4 bg-dark-softer text-light">
+                .md:w-1/4
+            </div>
         </div>
-    </div>
-    <div class="w-full md:w-1/4">
-        <div class="flex-center h-16 bg-dark-soft text-light">
-            .md:w-1/4
+        <div class="w-full md:w-1/4">
+            <div class="text-center py-4 bg-dark-soft text-light">
+                .md:w-1/4
+            </div>
         </div>
-    </div>
-    <div class="w-full md:w-1/4">
-        <div class="flex-center h-16 bg-dark-softer text-light">
-            .md:w-1/4
+        <div class="w-full md:w-1/4">
+            <div class="text-center py-4 bg-dark-softer text-light">
+                .md:w-1/4
+            </div>
         </div>
     </div>
 </div>
@@ -48,20 +54,23 @@ Columns don't need to fill a row:
 
 Columns can be different widths:
 
-<div class="flex mb-6">
-    <div class="w-full md:w-1/4">
-        <div class="flex-center h-16 bg-dark-softer text-light">
-            .md:w-1/4
+<div class="bg-light-softer text-medium text-sm py-4 mb-6">
+    <div class="text-dark-soft mb-2 px-4 leading-none">.flex</div>
+    <div class="flex flex-wrap">
+        <div class="w-full md:w-1/4">
+            <div class="text-center py-4 bg-dark-softer text-light">
+                .md:w-1/4
+            </div>
         </div>
-    </div>
-    <div class="w-full md:w-1/2">
-        <div class="flex-center h-16 bg-dark-soft text-light">
-            .md:w-1/2
+        <div class="w-full md:w-1/2">
+            <div class="text-center py-4 bg-dark-soft text-light">
+                .md:w-1/2
+            </div>
         </div>
-    </div>
-    <div class="w-full md:w-1/4">
-        <div class="flex-center h-16 bg-dark-softer text-light">
-            .md:w-1/4
+        <div class="w-full md:w-1/4">
+            <div class="text-center py-4 bg-dark-softer text-light">
+                .md:w-1/4
+            </div>
         </div>
     </div>
 </div>
@@ -69,30 +78,65 @@ Columns can be different widths:
 
 Rows can overflow and wrap:
 
-<div class="flex flex-wrap mb-6">
-    <div class="w-full md:w-1/3">
-        <div class="flex-center h-16 bg-dark-softer text-light">
-            .md:w-1/3
+<div class="bg-light-softer text-medium text-sm py-4 mb-6">
+    <div class="text-dark-soft mb-2 px-4 leading-none">.flex.flex-wrap</div>
+    <div class="flex flex-wrap">
+        <div class="w-full md:w-1/3">
+            <div class="text-center py-4 bg-dark-softer text-light">
+                .md:w-1/3
+            </div>
+        </div>
+        <div class="w-full md:w-1/3">
+            <div class="text-center py-4 bg-dark-soft text-light">
+                .md:w-1/3
+            </div>
+        </div>
+        <div class="w-full md:w-1/3">
+            <div class="text-center py-4 bg-dark-softer text-light">
+                .md:w-1/3
+            </div>
+        </div>
+        <div class="w-full md:w-1/3">
+            <div class="text-center py-4 bg-dark-soft text-light">
+                .md:w-1/3
+            </div>
+        </div>
+        <div class="w-full md:w-1/3">
+            <div class="text-center py-4 bg-dark-softer text-light">
+                .md:w-1/3
+            </div>
         </div>
     </div>
-    <div class="w-full md:w-1/3">
-        <div class="flex-center h-16 bg-dark-soft text-light">
-            .md:w-1/3
+</div>
+
+Columns can have gutters:
+
+<div class="bg-light-softer text-medium text-sm py-4 mb-6">
+    <div class="text-dark-soft mb-2 px-4 leading-none">.flex.pull-x-4</div>
+    <div class="flex flex-wrap pull-x-4">
+        <div class="flex-none w-full md:w-1/3 px-4">
+            <div class="text-center py-4 bg-dark-softer text-light">
+                <div>.flex-none</div>
+                <div>.w-full</div>
+                <div>.md:w-1/3</div>
+                <div>.px-4</div>
+            </div>
         </div>
-    </div>
-    <div class="w-full md:w-1/3">
-        <div class="flex-center h-16 bg-dark-softer text-light">
-            .md:w-1/3
+        <div class="flex-none w-full md:w-1/3 px-4">
+            <div class="text-center py-4 bg-dark-soft text-light">
+                <div>.flex-none</div>
+                <div>.w-full</div>
+                <div>.md:w-1/3</div>
+                <div>.px-4</div>
+            </div>
         </div>
-    </div>
-    <div class="w-full md:w-1/3">
-        <div class="flex-center h-16 bg-dark-soft text-light">
-            .md:w-1/3
-        </div>
-    </div>
-    <div class="w-full md:w-1/3">
-        <div class="flex-center h-16 bg-dark-softer text-light">
-            .md:w-1/3
+        <div class="flex-none w-full md:w-1/3 px-4">
+            <div class="text-center py-4 bg-dark-softer text-light">
+                <div>.flex-none</div>
+                <div>.w-full</div>
+                <div>.md:w-1/3</div>
+                <div>.px-4</div>
+            </div>
         </div>
     </div>
 </div>
@@ -100,77 +144,72 @@ Rows can overflow and wrap:
 
 Column widths can be automatic:
 
-<div class="flex mb-6">
-    <div class="w-1/6 md:flex-fill">
-        <div class="flex-center h-16 bg-dark-softer text-light">
-            .md:flex-fill
+<div class="bg-light-softer text-medium text-sm py-4 mb-6">
+    <div class="text-dark-soft mb-2 px-4 leading-none">.flex</div>
+    <div class="flex flex-wrap">
+        <div class="w-1/4 md:flex-fill">
+            <div class="text-center py-4 bg-dark-softer text-light">
+                .w-1/4.md:flex-fill
+            </div>
         </div>
-    </div>
-    <div class="w-1/6 md:flex-fill">
-        <div class="flex-center h-16 bg-dark-soft text-light">
-            .md:flex-fill
+        <div class="w-1/4 md:flex-fill">
+            <div class="text-center py-4 bg-dark-soft text-light">
+                .w-1/4.md:flex-fill
+            </div>
         </div>
-    </div>
-    <div class="w-1/6 md:flex-fill">
-        <div class="flex-center h-16 bg-dark-softer text-light">
-            .md:flex-fill
+        <div class="w-1/4 md:flex-fill">
+            <div class="text-center py-4 bg-dark-softer text-light">
+                .w-1/4.md:flex-fill
+            </div>
         </div>
-    </div>
-    <div class="w-1/6 md:flex-fill">
-        <div class="flex-center h-16 bg-dark-soft text-light">
-            .md:flex-fill
+        <div class="w-1/4 md:flex-fill">
+            <div class="text-center py-4 bg-dark-soft text-light">
+                .w-1/4.md:flex-fill
+            </div>
         </div>
-    </div>
-    <div class="w-1/6 md:flex-fill">
-        <div class="flex-center h-16 bg-dark-softer text-light">
-            .md:flex-fill
+        <div class="w-1/4 md:flex-fill">
+            <div class="text-center py-4 bg-dark-softer text-light">
+                .w-1/4.md:flex-fill
+            </div>
         </div>
     </div>
 </div>
 
-
 Fixed width columns are still respected even if a smaller screen has auto column widths:
 
-<div class="flex mb-6">
-    <div class="flex-fill md:w-1/6 md:flex-none">
-        <div class="flex-center h-24 bg-dark-softer text-light">
-            <div>
+<div class="bg-light-softer text-medium text-sm py-4 mb-6">
+    <div class="text-dark-soft mb-2 px-4 leading-none">.flex</div>
+    <div class="flex flex-wrap">
+        <div class="flex-fill md:w-1/6 md:flex-none">
+            <div class="text-center py-4 bg-dark-softer text-light">
                 <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-24 bg-dark-soft text-light">
-            <div>
+        <div class="flex-fill md:w-1/6 md:flex-none">
+            <div class="text-center py-4 bg-dark-soft text-light">
                 <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-24 bg-dark-softer text-light">
-            <div>
+        <div class="flex-fill md:w-1/6 md:flex-none">
+            <div class="text-center py-4 bg-dark-softer text-light">
                 <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-24 bg-dark-soft text-light">
-            <div>
+        <div class="flex-fill md:w-1/6 md:flex-none">
+            <div class="text-center py-4 bg-dark-soft text-light">
                 <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-24 bg-dark-softer text-light">
-            <div>
+        <div class="flex-fill md:w-1/6 md:flex-none">
+            <div class="text-center py-4 bg-dark-softer text-light">
                 <div>.flex-fill</div>
                 <div>.md:w-1/6</div>
                 <div>.md:flex-none</div>
@@ -182,18 +221,17 @@ Fixed width columns are still respected even if a smaller screen has auto column
 
 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">
-            <div>
+<div class="bg-light-softer text-medium text-sm py-4 mb-6">
+    <div class="text-dark-soft mb-2 px-4 leading-none">.flex</div>
+    <div class="flex flex-wrap">
+        <div class="w-full md:w-1/3 md:ml-auto">
+            <div class="text-center py-4 bg-dark-soft text-light">
                 <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">
-            <div>
+        <div class="w-full md:w-1/3 md:mr-auto">
+            <div class="text-center py-4 bg-dark-softer text-light">
                 <div>.md:w-1/6</div>
                 <div>.md:mr-auto</div>
             </div>