XY网格-SASS-列边距/装订线

Question

我目前正在使用Zurb Foundation 6.5.0构建这样的4块布局：

这是我当前的代码：

.blocks_4 {

    @include xy-grid;
    text-align: center;

    div {
        @include breakpoint(small) {
          @include xy-cell(12);
        }

        @include breakpoint(medium) {
          @include xy-cell(3);
          // @include xy-cell(3, $gutter-output: false);
        }

    }
}

我想删除块之间的白色装订线（我在屏幕截图中画了红色箭头以指出它们），以便它们粘在一起并使用整个页面宽度。

如何通过SASS实现此目标？ SASS Foundation文档确实缺少一些示例……我尝试使用$gutter-output: false，但无法正常工作。

Answer 1

愚蠢的我。答案很简单：

@include xy-cell(3, $gutters:0);

Answer 2

不是在父项（/容器）上设置了装订线，而是在子项（/ cells）上设置了装订线吗？

我敢打赌，您可以通过将边距设置为0来覆盖装订线，如下所示：

.blocks_4 {

    @include xy-grid;
    text-align: center;

    div {
        @include breakpoint(small) {
          @include xy-cell(12);
        }

        @include breakpoint(medium) {
          @include xy-cell(3);
          margin-left:0;
          margin-right:0;
        }
     }
  }

Answer 3

您还可以实现相同的事情，而无需添加任何其他SCSS（这将增加应用程序/站点的已编译CSS文件的权重），而您只需将Foundation的XY网格与HTML结合使用：

<div class="grid-x text-center">
  <div class="cell medium-3">3 cells</div>
  <div class="cell medium-3">3 cells</div>
  <div class="cell medium-3">3 cells</div>
  <div class="cell medium-3">3 cells</div>
</div>