Foundation 6.5 - 多个XY网格排水沟

Question

我可以使用Foundation XY Grid SASS mixins来创建网格装订线变化吗？

例如,我想要一个带有30px装订线的网格和一个带有10px装订线的网格.网格之间没有其他差异.

<!-- 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 在元素上生成自定义装订线。然而，对于边缘单元格的装订线，装订线的实现方式要求单元格宽度随装订线宽度更新。mixinxy-cell-static()会处理这个问题。这是一个使用示例：

.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 。