add block-grid-column so bottom margin matches gutters

diff --git a/docs/pages/grid.md b/docs/pages/grid.md
index d2e7367888dac6ab08670555d8b792fc4c7e6bd3..e882f01e813d5afed95f3565e277fd7a9c18ae81 100644 (file)
--- a/docs/pages/grid.md
+++ b/docs/pages/grid.md
@@ -433,27 +433,27 @@ Using these source ordering classes, you can shift columns around between our br
 
 ### Block Grids
 
-The block grid from Foundation 5 has been merged into the main grid. Add a class of the format `[size]-up-[n]` to change the size of all columns within the row. By default, the max number of columns you can use with block grid are 8.
+Block grids are a shorthand way to create equally-sized columns. Add a class of the format `.[size]-up-[n]` to change the number of columns within the row. By default, the max number of columns you can use with block grid are 8. Adding the `.block-grid-column` class to columns will apply a bottom margin equal to the width of gutters.
 
 ```html_example
-<div class="row small-up-1 medium-up-2 large-up-4">
-  <div class="column">
-    <img src="//placehold.it/300x300" class="thumbnail" alt="">
+<div class="row small-up-2 medium-up-3 large-up-4">
+  <div class="column block-grid-column">
+    <img src="//placehold.it/600x600" class="thumbnail" alt="">
   </div>
-  <div class="column">
-    <img src="//placehold.it/300x300" class="thumbnail" alt="">
+  <div class="column block-grid-column">
+    <img src="//placehold.it/600x600" class="thumbnail" alt="">
   </div>
-  <div class="column">
-    <img src="//placehold.it/300x300" class="thumbnail" alt="">
+  <div class="column block-grid-column">
+    <img src="//placehold.it/600x600" class="thumbnail" alt="">
   </div>
-  <div class="column">
-    <img src="//placehold.it/300x300" class="thumbnail" alt="">
+  <div class="column block-grid-column">
+    <img src="//placehold.it/600x600" class="thumbnail" alt="">
   </div>
-  <div class="column">
-    <img src="//placehold.it/300x300" class="thumbnail" alt="">
+  <div class="column block-grid-column">
+    <img src="//placehold.it/600x600" class="thumbnail" alt="">
   </div>
-  <div class="column">
-    <img src="//placehold.it/300x300" class="thumbnail" alt="">
+  <div class="column block-grid-column">
+    <img src="//placehold.it/600x600" class="thumbnail" alt="">
   </div>
 </div>
 ```

diff --git a/scss/grid/_classes.scss b/scss/grid/_classes.scss
index 2f3a999a13456446bdd68a0d4f7a0f6d16f5656e..a1bb3e0488327d83a81913075cded9e542067fe0 100644 (file)
--- a/scss/grid/_classes.scss
+++ b/scss/grid/_classes.scss
@@ -21,7 +21,8 @@
   $uncollapse: 'uncollapse',
   $offset: 'offset',
   $end: 'end',
-  $expanded: 'expanded'
+  $expanded: 'expanded',
+  $block-grid: 'block-grid'
 ) {
   // Row
   .#{$row} {
@@ -154,6 +155,11 @@
     }
   }
 
+  // Block grid columns
+  .#{$block-grid}-#{$column} {
+    @include block-grid-column;
+  }
+
   @if $column == 'column' {
     .columns {
       // scss-lint:disable PlaceholderInExtend

diff --git a/scss/grid/_gutter.scss b/scss/grid/_gutter.scss
index e6a5c87dcf153ea3933aac0df132870f8cd449c6..8969d292bd9653264d2002e517ae3f9a91192b15 100644 (file)
--- a/scss/grid/_gutter.scss
+++ b/scss/grid/_gutter.scss
@@ -90,3 +90,37 @@
   @warn 'This mixin is being replaced by grid-col-gutter(). grid-col-uncollapse() will be removed in Foundation 6.4.';
   @include grid-column-uncollapse($gutter);
 }
+
+/// Sets bottom marin on block grid columns to match gutters
+/// @param {Number|Keyword} $margin [auto]
+///   The bottom margin on block grid columns, accepts multiple values:
+///   - A single value will make the margin that exact size.
+///   - A breakpoint name will make the margin the corresponding size in the $gutters map.
+///   - "auto" will make the margin responsive, using the $gutters map values.
+/// @param {Number|Map} $margins [$grid-column-gutter] - Gutter map or single value to use. Responsive gutter settings by default.
+@mixin block-grid-column (
+  $margin: auto,
+  $margins: $grid-column-gutter
+) {
+  @if $margin == auto and type-of($margins) == 'map' {
+    // "auto"
+    @each $breakpoint, $value in $margins {
+      @include breakpoint($breakpoint) {
+        @include block-grid-column($value);
+      }
+    }
+  } @else {
+    // breakpoint name
+    @if type-of($margin) == 'string' {
+      $margin: grid-column-gutter($margin, $margins);
+    }
+
+    // single value
+    $margin-bottom: rem-calc($margin);
+
+    margin-bottom: $margin-bottom;
+    > :last-child {
+      margin-bottom: 0;
+    }
+  }
+}