diff --git a/docs/_includes/css/grid.html b/docs/_includes/css/grid.html
index 429ef90f946e33332009e10113c5953975ed723b..ad2d27439ab7f82ce3f039e8f0482563cf958b56 100644
--- a/docs/_includes/css/grid.html
+++ b/docs/_includes/css/grid.html
@@ -397,9 +397,8 @@
   <h4>Variables</h4>
   <p>Variables determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.</p>
 {% highlight scss %}
-@grid-columns:              12;
-@grid-gutter-width:         30px;
-@grid-float-breakpoint:     768px;
+@grid-columns:      12;
+@grid-gutter-width: 1.5rem;
 {% endhighlight %}
 
   <h4>Mixins</h4>
@@ -407,155 +406,74 @@
 {% highlight scss %}
 // Creates a wrapper for a series of columns
 .make-row(@gutter: @grid-gutter-width) {
-  // Then clear the floated columns
-  .clearfix();
-
-  @media (min-width: @screen-sm-min) {
-    margin-left:  (@gutter / -2);
-    margin-right: (@gutter / -2);
-  }
-
-  // Negative margin nested rows out to align the content of columns
-  .row {
-    margin-left:  (@gutter / -2);
-    margin-right: (@gutter / -2);
-  }
-}
-
-// Generate the extra small columns
-.make-xs-column(@columns; @gutter: @grid-gutter-width) {
-  position: relative;
-  // Prevent columns from collapsing when empty
-  min-height: 1px;
-  // Inner gutter via padding
-  padding-left:  (@gutter / 2);
-  padding-right: (@gutter / 2);
-
-  // Calculate width based on number of columns available
-  @media (min-width: @grid-float-breakpoint) {
-    float: left;
-    width: percentage((@columns / @grid-columns));
-  }
-}
-
-// Generate the small columns
-.make-sm-column(@columns; @gutter: @grid-gutter-width) {
-  position: relative;
-  // Prevent columns from collapsing when empty
-  min-height: 1px;
-  // Inner gutter via padding
-  padding-left:  (@gutter / 2);
-  padding-right: (@gutter / 2);
-
-  // Calculate width based on number of columns available
-  @media (min-width: @screen-sm-min) {
-    float: left;
-    width: percentage((@columns / @grid-columns));
-  }
-}
-
-// Generate the small column offsets
-.make-sm-column-offset(@columns) {
-  @media (min-width: @screen-sm-min) {
-    margin-left: percentage((@columns / @grid-columns));
-  }
-}
-.make-sm-column-push(@columns) {
-  @media (min-width: @screen-sm-min) {
-    left: percentage((@columns / @grid-columns));
-  }
-}
-.make-sm-column-pull(@columns) {
-  @media (min-width: @screen-sm-min) {
-    right: percentage((@columns / @grid-columns));
-  }
+  margin-left:  (@gutter / -2);
+  margin-right: (@gutter / -2);
+  &:extend(.clearfix all);
 }
 
-// Generate the medium columns
-.make-md-column(@columns; @gutter: @grid-gutter-width) {
+// Make the element grid-ready (applying everything but the width)
+.make-col(@gutter: @grid-gutter-width) {
   position: relative;
-  // Prevent columns from collapsing when empty
+  float: left;
   min-height: 1px;
-  // Inner gutter via padding
   padding-left:  (@gutter / 2);
   padding-right: (@gutter / 2);
-
-  // Calculate width based on number of columns available
-  @media (min-width: @screen-md-min) {
-    float: left;
-    width: percentage((@columns / @grid-columns));
-  }
 }
 
-// Generate the medium column offsets
-.make-md-column-offset(@columns) {
-  @media (min-width: @screen-md-min) {
-    margin-left: percentage((@columns / @grid-columns));
-  }
-}
-.make-md-column-push(@columns) {
-  @media (min-width: @screen-md-min) {
-    left: percentage((@columns / @grid-columns));
-  }
-}
-.make-md-column-pull(@columns) {
-  @media (min-width: @screen-md-min) {
-    right: percentage((@columns / @grid-columns));
-  }
+// Set a width (to be used in or out of media queries)
+.make-col-span(@columns) {
+  width: percentage((@columns / @grid-columns));
 }
 
-// Generate the large columns
-.make-lg-column(@columns; @gutter: @grid-gutter-width) {
-  position: relative;
-  // Prevent columns from collapsing when empty
-  min-height: 1px;
-  // Inner gutter via padding
-  padding-left:  (@gutter / 2);
-  padding-right: (@gutter / 2);
-
-  // Calculate width based on number of columns available
-  @media (min-width: @screen-lg-min) {
-    float: left;
-    width: percentage((@columns / @grid-columns));
-  }
+// Get fancy by offsetting, or changing the sort order
+.make-col-offset(@columns) {
+  margin-left: percentage((@columns / @grid-columns));
 }
-
-// Generate the large column offsets
-.make-lg-column-offset(@columns) {
-  @media (min-width: @screen-lg-min) {
-    margin-left: percentage((@columns / @grid-columns));
-  }
-}
-.make-lg-column-push(@columns) {
-  @media (min-width: @screen-lg-min) {
-    left: percentage((@columns / @grid-columns));
-  }
+.make-col-push(@columns) {
+  left: percentage((@columns / @grid-columns));
 }
-.make-lg-column-pull(@columns) {
-  @media (min-width: @screen-lg-min) {
-    right: percentage((@columns / @grid-columns));
-  }
+.make-col-pull(@columns) {
+  right: percentage((@columns / @grid-columns));
 }
 {% endhighlight %}
 
   <h4>Example usage</h4>
   <p>You can modify the variables to your own custom values, or just use the mixins with their default values. Here's an example of using the default settings to create a two-column layout with a gap between.</p>
 {% highlight scss %}
-.wrapper {
+.container {
+  max-width: 60em;
+  .make-container();
+}
+.row {
   .make-row();
 }
 .content-main {
-  .make-lg-column(8);
+  .make-col();
+
+  @media (max-width: 32em) {
+    .make-col-span(6);
+  }
+  @media (min-width: 32.1em) {
+    .make-col-span(8);
+  }
 }
 .content-secondary {
-  .make-lg-column(3);
-  .make-lg-column-offset(1);
+  .make-col();
+
+  @media (max-width: 32em) {
+    .make-col-span(6);
+  }
+  @media (min-width: 32.1em) {
+    .make-col-span(4);
+  }
 }
 {% endhighlight %}
 {% highlight html %}
-<div class="wrapper">
-  <div class="content-main">...</div>
-  <div class="content-secondary">...</div>
+<div class="container">
+  <div class="row">
+    <div class="content-main">...</div>
+    <div class="content-secondary">...</div>
+  </div>
 </div>
 {% endhighlight %}
 </div>
diff --git a/less/mixins/grid.less b/less/mixins/grid.less
index 1353a7354ba9fec7aaa460204a7c43ba60df53e6..bdd06e2f67184caf2ee728b5d89abd783ba12f46 100644
--- a/less/mixins/grid.less
+++ b/less/mixins/grid.less
@@ -2,7 +2,6 @@
 //
 // Generate semantic grid columns with these mixins.
 
-// Centered container element
 .make-container(@gutter: @grid-gutter-width) {
   margin-right: auto;
   margin-left: auto;
@@ -11,7 +10,6 @@
   &:extend(.clearfix all);
 }
 
-// Creates a wrapper for a series of columns
 .make-row(@gutter: @grid-gutter-width) {
   margin-left:  (@gutter / -2);
   margin-right: (@gutter / -2);
@@ -29,12 +27,15 @@
 .make-col-span(@columns) {
   width: percentage((@columns / @grid-columns));
 }
+
 .make-col-offset(@columns) {
   margin-left: percentage((@columns / @grid-columns));
 }
+
 .make-col-push(@columns) {
   left: percentage((@columns / @grid-columns));
 }
+
 .make-col-pull(@columns) {
   right: percentage((@columns / @grid-columns));
 }