How to collapse Foundation's xy-grid-layout cells outer gutters? - css

Question

Trying to get my head around building Foundation's XY Grid semantically (https://foundation.zurb.com/sites/docs/xy-grid.html#building-semantically).
Think I've got most of it figured out minus a nested xy-grid-layout within a xy-grid.
My goal is to have the outer gutters on the outer cells to collapse so the Block Grid is flush with the main content cell:
Here's what I've got so far:
.fr_container {
#include xy-grid-container;
}
.fr_grid {
#include xy-grid;
background-color: $light-gray;
}
.fr_main {
#include xy-cell();
#include flex-order(2);
background-color: $medium-gray;
#include breakpoint(medium) {
#include xy-cell(9);
#include flex-order(1);
}
}
.fr_sidebar {
#include xy-cell();
#include flex-order(1);
background-color: $medium-gray;
#include breakpoint(medium) {
#include xy-cell(3);
#include flex-order(2);
}
}
.fr_full {
#include xy-cell();
}
.fr_gallery {
#include xy-grid;
#include xy-grid-layout(3, '.fr_gallery-item', true, $grid-margin-gutters, margin, right left top bottom, false);
background-color: $dark-gray;
}
.fr_gallery-item {
background-color: $black;
border: rem-calc(1) dashed $white;
color: $white;
}
The HTML:
<div class="fr_container">
<h3>Grid Container</h3>
<div class="fr_grid">
<h3 class="fr_full">Grid</h3>
<div class="fr_main">
<h3>Main Content</h3>
<h4>Block Grid</h4>
<div class="fr_gallery">
<div class="fr_gallery-item">1</div>
<div class="fr_gallery-item">2</div>
<div class="fr_gallery-item">3</div>
<div class="fr_gallery-item">4</div>
<div class="fr_gallery-item">5</div>
<div class="fr_gallery-item">6</div>
<div class="fr_gallery-item">7</div>
<div class="fr_gallery-item">8</div>
<div class="fr_gallery-item">9</div>
<div class="fr_gallery-item">10</div>
<div class="fr_gallery-item">11</div>
<div class="fr_gallery-item">12</div>
<div class="fr_gallery-item">13</div>
<div class="fr_gallery-item">14</div>
<div class="fr_gallery-item">15</div>
</div>
</div>
<div class="fr_sidebar">
<h3>Sidebar</h3>
</div>
</div>
</div>

Answer 1

Well Ben, to collapse the outer margin, perhaps all you need to do is add this margin override ?
.fr_container {
#include xy-grid-container;
margin: 0;
}