Add is-collapse-child class

diff --git a/docs/pages/flex-grid.md b/docs/pages/flex-grid.md
index e9d258ab3fe97aa62572bf31f9c377cf7e90a328..fdd88d4b339ea447fe08590f17970ca5ef4aa544 100644 (file)
--- a/docs/pages/flex-grid.md
+++ b/docs/pages/flex-grid.md
@@ -242,6 +242,8 @@ The `.collapse` class lets you remove column gutters (padding).
 
 There are times when you won't want each media query to be collapsed or uncollapsed. In this case, use the media query size you want and collapse or uncollapse and add that to your row element. Example shows no gutter at small media size and then adds the gutter to columns at medium.
 
+The `.is-collapse-child` class removes negative margins from nested row under collapsed parent.
+
 ```html
 <div class="row medium-uncollapse large-collapse">
   <div class="small-6 columns">

diff --git a/scss/grid/_flex-grid.scss b/scss/grid/_flex-grid.scss
index d8f33a640ff3d121e795261ed0353a3a144ef9a3..d6d4016f085e81f539a955c50ff4d7e3421642d1 100644 (file)
--- a/scss/grid/_flex-grid.scss
+++ b/scss/grid/_flex-grid.scss
@@ -167,12 +167,16 @@
     &.collapse {
       > .column {
         @include grid-col-collapse;
-        > .row {
-          margin-left: 0;
-          margin-right: 0;
-        }
       }
     }
+
+    // Undo negative margins
+    // From collapsed child
+    &.is-collapse-child,
+    &.collapse > .column > .row {
+      margin-left: 0;
+      margin-right: 0;
+    }
   }
 
   // Column