时间戳

首页 > 解决方案 > Foundation 6.5 - Multiple XY Grid gutters

zurb-foundation - Foundation 6.5 - Multiple XY Grid gutters

问题描述

Can I use Foundation XY Grid SASS mixins to create grid gutter variations?

For example, I would like to have a grid with a 30px gutter, and a grid with a 10px gutter. No other differences between the grids.

<!-- 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>

标签： zurb-foundationxy-grid

解决方案

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

推荐阅读