Foundation 6.5 - 多个 XY 网格间距

Question

我可以使用 Foundation XY Grid SASS mixin 来创建网格间距变化吗？

例如，我想要一个带有 30 像素装订线的网格和一个带有 10 像素装订线的网格。网格之间没有其他差异。

<!-- Regular (30px) grid gutter ->
<div class="grid-x grid-margin-x">
  <div class="cell medium-6">
  </div>
  <div class="cell medium-6">
  </div>
</div>

<!-- Custom (10px) grid gutter -->
<div class="grid-x grid-margin-x--small">
  <div class="cell medium-6">
  </div>
  <div class="cell medium-6">
  </div>
</div>

Answer 1

在 Foundation v6.5 中，您可以使用 xy-gutters() mixin to generate custom gutters on an element. However for the gutters of a margin cell, gutters are implemented in a way that require the cell width to be updated with the gutter width. The xy-cell-static() mixin 来处理这个问题。这是一个使用示例：

.grid-margin-x--small > .cell {
  @include xy-cell-static($gutters: 10px);
}

我们知道这并不理想，我们已经在 XY 网格 API 中对 v6.6.0 进行了一些重大重构和各种改进，以简化自定义 grid/cell/gutters 方式的生成。有关详细信息，请参阅 https://github.com/zurb/foundation-sites/pull/11405。

Foundation 6.5 - 多个 XY 网格间距

Foundation 6.5 - Multiple XY Grid gutters

zurb-foundation

xy-grid