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

gutter 不是设置在父级（/container）而不是子级（/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 2

傻我。答案很简单：

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

Answer 3

您也可以实现相同的目的而无需添加任何额外的 SCSS（这将增加您的 app/site 编译的 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>

XY 网格 - SASS - 列边距/间距

XY Grid - SASS - columns margins / gutters

sass

zurb-foundation

zurb-foundation-6

gutter