Add block grid classes to the flex grid, closes #7924

diff --git a/docs/pages/flex-grid.md b/docs/pages/flex-grid.md
index 6bece974b65b15ec54915c5a061156aff646ce19..1971daac55257df7e780918ed26619500efc488a 100644 (file)
--- a/docs/pages/flex-grid.md
+++ b/docs/pages/flex-grid.md
@@ -306,3 +306,21 @@ We have a set of classes that make it easy to setup source ordering in your HTML
   </div>
 </div>
 ```
+
+---
+
+## Block Grids
+
+To define column widths at the row-level, instead of the individual column level, add the class `.[size]-up-[n]` to a row, where `[n]` is the number of columns to display per row, and `[size]` is the breakpoint at which to apply the effect.
+
+<div class="primary callout">
+  <p>A block grid row has the property <code>align-items: stretch</code> by default, meaning the columns in each row are equal height. To change this, change the <code>align-items</code> property of the row, or use one of the <a href="flexbox.html#vertical-alignment">vertical alignment flexbox classes</a>.</p>
+</div>
+
+```html_example
+<div class="row small-up-1 medium-up-2 large-up-3">
+  <div class="column">1 per row on small</div>
+  <div class="column">2 per row on medium</div>
+  <div class="column">3 per row on large</div>
+</div>
+```

diff --git a/scss/grid/_flex-grid.scss b/scss/grid/_flex-grid.scss
index 87e87c84cc0457aa1194c9e973ac4f31b3f73967..72cb74e50a017dbb14a87862d7bf6e7bbab7808e 100644 (file)
--- a/scss/grid/_flex-grid.scss
+++ b/scss/grid/_flex-grid.scss
@@ -94,6 +94,24 @@
   }
 }
 
+/// Creates a block grid for a flex grid row.
+///
+/// @param {Number} $n - Number of columns to display on each row.
+/// @param {String} $selector - Selector to use to target columns within the row.
+@mixin flex-grid-layout(
+  $n,
+  $selector: '.column'
+) {
+  flex-wrap: wrap;
+
+  > #{$selector} {
+    $pct: percentage(1/$n);
+
+    flex: 0 0 $pct;
+    max-width: $pct;
+  }
+}
+
 /// Changes the source order of a flex grid column. Columns with lower numbers appear first in the layout.
 /// @param {Number} $order [0] - Order number to apply.
 @mixin flex-grid-order($order: 0) {
@@ -160,10 +178,17 @@
       }
     }
 
+    // Source ordering
     @for $i from 1 through 6 {
-      // Source ordering
-      .#{$-zf-size}-order-#{$i} {
-        @include flex-order($i);
+      .#{$-zf-size}-up-#{$i} {
+        @include flex-grid-layout($i);
+      }
+    }
+
+    // Block grid
+    @for $i from 1 through $block-grid-max {
+      .#{$-zf-size}-up-#{$i} {
+        @include grid-layout($i);
       }
     }