How to define grid margins for each breakpoint when building an XY-grid with mixins

I want to build a grid using the mixins for XY-grid in Zurb Foundation 6.6, but I run into problems when I want to set the negative margins for the grid itself only on specific breakpoints.

Using the mixin xy-gutters() creates margins for each breakpoint, and I cannot choose to use margins just for some of them.

In the example below I want breakpoint(medium) to have a cell without margin gutters.

How is this meant to be done?

Thanks for your help!

.hero {
  &__container {
    @include xy-grid-container;
  }

  &__grid {
    @include xy-grid();

    // This generates gutter margins for all breakpoints so I cannot choose to have without gutters for some breakpoints
    @include xy-gutters(
      $gutter-type: margin,
      $gutter-position: right left,
      $negative: true
    );
  }

  &__cell {
    @include xy-cell($size: 4, $gutter-type: margin);

    @include breakpoint(medium) {
      @include xy-cell($size: 6, $gutter-type: none);
    }

    @include breakpoint(large) {
      @include xy-cell($size: 4, $gutter-type: margin);
    }
  }
}

The $gutters option can be set, which is by default the value of $grid-margin-gutters.

You should be also able to dynamically set / update the list or directly pass it to the mixin:

Thanks! That’s a good solution.

Only downside is the output of -0, which would look better if it was just 0. It still works of course but could be a minor update for the future.

I also realized that I could pass just a single value for gutters, so there are two possible solutions to my problem then.

Well, you can also use -0 which will be inverted to +0 which is 0.

I mean it works, so it doesn’t really matter, it’s just about the aesthetics of the code itself. But what do you mean by it being inverted?

Whether you pass 0 or -0 as the value, the css generated is

margin-left: -0;
margin-right: -0;

Ah ok, seems then it doesn’t really matter.