ファウンデーションのxyグリッドレイアウトセルの外側溝を崩壊させる方法は？

Question

ファウンデーションのXYグリッドを意味的に構築しようとしています（https://foundation.zurb.com/sites/docs/xy-grid.html#building-semantically）。

xyグリッド内のネストされたxyグリッドレイアウトを除外していると思っています。

私の目標は、そのブロックのグリッドは、メインのコンテンツセルと同じ高さに崩壊し、外側の細胞の外側の側溝を持つことです。

は、ここで私が持っているものですこれまで：

.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; 
} 

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

外側の余白を崩壊させるには、おそらく、この余白のオーバーライドを追加するだけです。

.fr_container { 
 
    @include xy-grid-container; 
 
    margin: 0; 
 
}