Foundation 6.5 - Multiple XY Grid gutters

Question

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>

Answer 1

In Foundation v6.5, you can use the 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 takes care of that. Here is an example of use:

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

We know that this is not ideal and we already worked on some big refactor and various improvement for v6.6.0 in the XY Grid API to make the generation of custom grid/cell/gutters way easier. See https://github.com/zurb/foundation-sites/pull/11405 for more details.