Add responsive gutter info to grid docs

diff --git a/docs/pages/grid.md b/docs/pages/grid.md
index 7f70daff162f3c550d24a3361f501b60af8253e6..9d219e0612574a68a0c4f394a8d88083be8739ba 100644 (file)
--- a/docs/pages/grid.md
+++ b/docs/pages/grid.md
@@ -277,6 +277,32 @@ In order to work around browsers' different rounding behaviors, Foundation will
 
 ---
 
+### Responsive Gutters
+
+<div class="warning callout">
+  <p>Responsive gutters were added in <strong>Foundation 6.1.0</strong>. As of this version, it's still possible to use static gutters, or you can upgrade your project to responsive gutters. In Foundation 6.2.0, static gutters will be removed entirely in favor of responsive gutters. Refer to the <a href="https://github.com/zurb/foundation-sites/releases/tag/v6.1.0">Version 6.1.0 changelog</a> for more details on the upgrade process.</p>
+</div>
+
+The grid *gutter*&mdash;the space between two columns in a row, and the space between the edge of a grid and the edge of the page&mdash;is responsive, and becomes wider on larger screens.
+
+Breakpoint | Gutter Size
+-----------|------------
+`small`    | 20px
+`medium`   | 30px
+
+If you're using the Sass version of Foundation, you can change these defaults by editing the `$grid-column-responsive-gutter` variable:
+
+```scss
+$grid-column-responsive-gutter: (
+  small: 20px,
+  medium: 30px,
+);
+```
+
+To add more gutter definitions, add new lines to the map. The breakpoint names used here must match a breakpoint name in your project's `$breakpoints` map.
+
+---
+
 ### Collapse/Uncollapse Rows
 
 The `.collapse` class lets you remove column gutters (padding).

diff --git a/scss/grid/_grid.scss b/scss/grid/_grid.scss
index 3860c6fe330a8bb7fc7c745a43753553fe3040ac..85131f5975ce2dd0029a7abd9122b3f8afe5b478 100644 (file)
--- a/scss/grid/_grid.scss
+++ b/scss/grid/_grid.scss
@@ -20,6 +20,7 @@ $grid-column-gutter: null !default;
 
 /// The amount of space between columns at different screen sizes.
 /// @type Map
+/// @since 6.1.0
 $grid-column-responsive-gutter: (
   small: 20px,
   medium: 30px,