Add offset classes to flex grid, closes #7266

diff --git a/docs/pages/flex-grid.md b/docs/pages/flex-grid.md
index 69cd1053d3669df452606d4305b6cf17851ece69..afb69083f30c7e53da417cabcfec36af13ab4a72 100644 (file)
--- a/docs/pages/flex-grid.md
+++ b/docs/pages/flex-grid.md
@@ -226,6 +226,19 @@ The same alignment classes can also be applied to individual columns.
 
 ---
 
+## Offsets
+
+Offsets work identically to the float grid, by applying `margin-left` to a column.
+
+```html_example
+<div class="row">
+  <div class="small-4 large-offset-2 columns">Offset 2 on large</div>
+  <div class="small-4 columns">4 columns</div>
+</div>
+```
+
+---
+
 ## Source Ordering
 
 Flexbox supports source ordering, making it easy to rearrange columns on different screen sizes without weird relative positioning tricks.

diff --git a/scss/grid/_flex-grid.scss b/scss/grid/_flex-grid.scss
index dcf7e9942c512ac2de41a57e4c58c28866a2450a..f83fd4f388df094918557f5fef12490c65c2daa8 100644 (file)
--- a/scss/grid/_flex-grid.scss
+++ b/scss/grid/_flex-grid.scss
@@ -158,6 +158,19 @@
     }
   }
 
+  // Offsets
+  @each $size in $breakpoint-classes {
+    @include breakpoint($size) {
+      @for $i from 1 through $grid-column-count {
+        $o: $i - 1;
+
+        .#{$size}-offset-#{$o} {
+          @include grid-column-offset($o);
+        }
+      }
+    }
+  }
+
   // Source ordering
   @each $size in $breakpoint-classes {
     @include breakpoint($size) {