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 在元素上生成自定义排水沟。然而，对于边距单元格的排水沟，排水沟的实现方式要求单元格宽度与排水沟宽度一起更新。 xy-cell-static() mixin 可以解决这个问题。下面是一个使用示例：

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

我们知道这并不理想，我们已经在 XY Grid API 中对 v6.6.0 进行了一些重大的重构和各种改进，以使自定义网格/单元格/排水沟的生成更加容易。详情请见https://github.com/zurb/foundation-sites/pull/11405。