如何折叠基金会的xy-grid-layout单元外檐槽？

Question

尝试在语义上（https://foundation.zurb.com/sites/docs/xy-grid.html#building-semantically）开始构建Foundation的XY Grid。

想想我已经发现大部分内容都是在xy网格中减去嵌套的xy-grid-layout。

我的目标是让外部细胞上的外部水槽折叠，这样Block Grid与主要内容单元格齐平：

这是我到目前为止所得到的：

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