diff --git a/docs/source/_layouts/master.blade.php b/docs/source/_layouts/master.blade.php
index bea37ce58..6ee1d0884 100644
--- a/docs/source/_layouts/master.blade.php
+++ b/docs/source/_layouts/master.blade.php
@@ -27,8 +27,8 @@
             </div>
         </header>
         <div class="container">
-            <div class="row">
-                <div class="col-12 sm:col-3">
+            <div class="flex flex-wrap">
+                <div class="w-full lg:w-1/4">
                     <nav class="py-4 text-light text-base">
                         <div>
                             <p class="mb-4 text-dark-softer text-uppercase tracking-wide text-medium text-sm">Introduction</p>
@@ -75,7 +75,7 @@
                         </div>
                     </nav>
                 </div>
-                <div class="col-12 sm:col-9">
+                <div class="w-full lg:w-3/4">
                     <div class="p-12 rounded-lg bg-light shadow-2">
                         @yield('body')
                     </div>
diff --git a/docs/source/grid.md b/docs/source/grid.md
index aa72b57f6..8852fbd5f 100644
--- a/docs/source/grid.md
+++ b/docs/source/grid.md
@@ -4,3 +4,234 @@ title: "Grid"
 ---
 
 # Grid
+
+Basic grid example:
+
+<div class="bg-light-softer text-medium text-sm mb-6">
+    <div class="text-dark-soft p-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>
+</div>
+
+Columns don't need to fill a row:
+
+<div class="bg-light-softer text-medium text-sm mb-6">
+    <div class="text-dark-soft p-4 leading-none">.flex.flex-wrap</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 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 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>
+
+
+Columns can be different widths:
+
+<div class="bg-light-softer text-medium text-sm mb-6">
+    <div class="text-dark-soft p-4 leading-none">.flex.flex-wrap</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 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 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>
+
+
+Rows can overflow and wrap:
+
+<div class="bg-light-softer text-medium text-sm mb-6">
+    <div class="text-dark-soft p-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>
+
+Columns can have gutters:
+
+<div class="bg-light-softer text-medium text-sm mb-6">
+    <div class="text-dark-soft p-4 leading-none">.flex.flex-wrap.pull-x-4</div>
+    <div class="flex flex-wrap pull-x-4">
+        <div class="w-full md:w-1/3 px-4">
+            <div class="text-center py-4 bg-dark-softer text-light">
+                <div>.w-full</div>
+                <div>.md:w-1/3</div>
+                <div>.px-4</div>
+            </div>
+        </div>
+        <div class="w-full md:w-1/3 px-4">
+            <div class="text-center py-4 bg-dark-soft text-light">
+                <div>.w-full</div>
+                <div>.md:w-1/3</div>
+                <div>.px-4</div>
+            </div>
+        </div>
+        <div class="w-full md:w-1/3 px-4">
+            <div class="text-center py-4 bg-dark-softer text-light">
+                <div>.w-full</div>
+                <div>.md:w-1/3</div>
+                <div>.px-4</div>
+            </div>
+        </div>
+    </div>
+</div>
+
+
+Column widths can be automatic:
+
+<div class="bg-light-softer text-medium text-sm mb-6">
+    <div class="text-dark-soft p-4 leading-none">.flex.flex-wrap</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 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 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 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 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="bg-light-softer text-medium text-sm mb-6">
+    <div class="text-dark-soft p-4 leading-none">.flex.flex-wrap</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 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 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 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 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>
+
+
+Use margin auto utilities to accomplish offsets:
+
+<div class="bg-light-softer text-medium text-sm mb-6">
+    <div class="text-dark-soft p-4 leading-none">.flex.flex-wrap</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 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>
+        </div>
+    </div>
+</div>
diff --git a/src/generators.less b/src/generators.less
index ea5723d77..b57d9be97 100644
--- a/src/generators.less
+++ b/src/generators.less
@@ -10,7 +10,6 @@
 @import "generators/border-radius";
 @import "generators/border-widths";
 @import "generators/constrain";
-@import "generators/grid";
 @import "generators/shadows";
 @import "generators/sizing";
 @import "generators/spacing-padding";
diff --git a/src/generators/grid.less b/src/generators/grid.less
deleted file mode 100644
index 0c55c0e3e..000000000
--- a/src/generators/grid.less
+++ /dev/null
@@ -1,70 +0,0 @@
-.generate-grid-columns(@grid-column-count; @prefix; @i: 1) when (@i <= @grid-column-count) {
-  .@{prefix}col-@{i} {
-    flex-basis: 100% * (@i / @grid-column-count);
-    max-width: 100% * (@i / @grid-column-count);
-  }
-
-  @offset-i: @i - 1;
-  .@{prefix}offset-@{offset-i} {
-    margin-left: 100% * (@offset-i / @grid-column-count);
-  }
-
-  .generate-grid-columns(@grid-column-count; @prefix; @i + 1);
-}
-
-.generate-responsive-grid(@grid-column-count; @screen; @min-width) {
-  @prefix: ~"@{screen}\:";
-
-  @media (min-width: @min-width) {
-    .@{prefix}col {
-      flex-grow: 1;
-      flex-basis: 0;
-      max-width: 100%;
-      min-width: 0;
-    }
-
-    .@{prefix}col-first {
-      order: -1;
-    }
-
-    .@{prefix}col-last {
-      order: 1;
-    }
-
-    .generate-grid-columns(@grid-column-count; @prefix);
-  }
-}
-
-.generate-responsive-grids(@grid-column-count; @screens; @i: 1) when (@i <= length(@screens)) {
-  @screen: extract(@screens, @i);
-  @name: extract(@screen, 1);
-  @screen-width: extract(@screen, 2);
-
-  .generate-responsive-grid(@grid-column-count; @name; @screen-width);
-  .generate-responsive-grids(@grid-column-count; @screens; @i + 1);
-}
-
-.generate-all-grids(@grid-column-count) {
-  .col {
-    flex-grow: 1;
-    flex-basis: 0;
-    max-width: 100%;
-    min-width: 0;
-  }
-  .col-first {
-    order: -1;
-  }
-  .col-last {
-    order: 1;
-  }
-  .generate-grid-columns(@grid-column-count; ~"");
-}
-
-.generate-all-grids(@grid-column-count; none) {
-  .generate-all-grids(@grid-column-count);
-}
-
-.generate-all-grids(@grid-column-count; @screens) when not (@screens = none) {
-  .generate-all-grids(@grid-column-count);
-  .generate-responsive-grids(@grid-column-count; @screens);
-}
diff --git a/src/generators/spacing-margin.less b/src/generators/spacing-margin.less
index b6483a6da..fc9e03048 100644
--- a/src/generators/spacing-margin.less
+++ b/src/generators/spacing-margin.less
@@ -61,6 +61,8 @@
 
   @media (min-width: @screen-width) {
     @prefix: ~"@{name}\:";
+    .@{prefix}ml-auto { margin-left: auto; }
+    .@{prefix}mr-auto { margin-right: auto; }
     .@{prefix}mx-auto { margin-left: auto; margin-right: auto; }
     .generate-screen-margin-utilities(@margin-scale; @name);
   }
@@ -69,6 +71,8 @@
 }
 
 .define-margin-utilities(@margin-scale) {
+  .ml-auto { margin-left: auto; }
+  .mr-auto { margin-right: auto; }
   .mx-auto { margin-left: auto; margin-right: auto; }
   .generate-margin-utilities(@margin-scale);
 }
diff --git a/src/utilities.less b/src/utilities.less
index 728d608e4..8b9c82fe1 100644
--- a/src/utilities.less
+++ b/src/utilities.less
@@ -7,7 +7,6 @@
 @import "utilities/constrain";
 @import "utilities/display";
 @import "utilities/flex";
-@import "utilities/grid";
 @import "utilities/images";
 @import "utilities/misc";
 @import "utilities/overflow";
@@ -18,3 +17,10 @@
 @import "utilities/text";
 @import "utilities/vue";
 @import "utilities/z-index";
+
+@screens:
+  sm 576px,
+  md 768px,
+  lg 992px,
+  xl 1200px,
+;
diff --git a/src/utilities/grid.less b/src/utilities/grid.less
deleted file mode 100644
index 723bea4a1..000000000
--- a/src/utilities/grid.less
+++ /dev/null
@@ -1,16 +0,0 @@
-@screens:
-  sm 576px,
-  md 768px,
-  lg 992px,
-  xl 1200px;
-
-@grid-column-count: 12;
-
-.row {
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-}
-
-.generate-all-grids(@grid-column-count; @screens);
diff --git a/src/utilities/sizing.less b/src/utilities/sizing.less
index 76634badd..7d242759a 100644
--- a/src/utilities/sizing.less
+++ b/src/utilities/sizing.less
@@ -16,6 +16,17 @@
   '96' 24rem,
   '128' 32rem,
   'full' 100%,
+  '1\/2' 50%,
+  '1\/3' (100% / 3),
+  '2\/3' (100% / 3 * 2),
+  '1\/4' 25%,
+  '3\/4' 75%,
+  '1\/5' 20%,
+  '2\/5' 40%,
+  '3\/5' 60%,
+  '4\/5' 80%,
+  '1\/6' (100% / 6),
+  '5\/6' (100% / 6 * 5),
 ;
 
 @width-scale: @sizing-scale;