Responsive $grid-margin-gutters only work when XY-cell is included with a breakpoint

[studiobovenkamer]

I'm working with the XY-grid. I tried to get different gutters for medium (30px) and small (15px), but I discovered that this only works when the xy-cells are nested in a breakpoint media query, like this:

.example-section{

@include xy-grid-container;
@include xy-grid;
  
.text {
    @include xy-cell(4);//the gutter will be small-sized for small screens
    
@include breakpoint(medium) {
      @include xy-cell(4);//now the gutter will be medium-sized, for medium screens and up
    }

  }
  .icon {
    @include xy-cell(3);//but this one always uses the small gutter size, also on medium screens. 
  }

}

I don't know if this is a bug or a feature, but I expected that in this example .icon would have responsive gutters too (just like it does with $grid-column-gutter) without nesting the cell in media queries. Currently this leads to extra coding, for example this could be simpler:

//To use the grid-margin-gutter map for small and medium, I need to write:
.responsive-something {
    @include xy-cell();
    @include breakpoint(medium) {
      @include xy-cell();
    }
}

//While it might be nicer to just write this 
.responsive-something {
    @include xy-cell();
}

[mwinkelm]

I think what you are looking for is the mixin xy-cell-breakpoints, see https://foundation.zurb.com/sites/docs/xy-grid.html#responsive-grids

[ncoden]

@mwinkelm The doc is incorrect about xy-cell-breakpoints. See #10834

@studiobovenkamer You may want to use:

@include xy-cell($breakpoint: medium);

To generate a cell with medium gutters. But it is not responsive.

[geosigno]

Is this not an issue to have to do that to have responsive gutters?

I mean let's say a block have:

.block { @include xy-cell(6); }

and my setting.scss is:

$grid-margin-gutters: (
    small: 48px,
    medium: 64px,
    large: 96px;
    xlarge: 24px
);

and this 6 value is the same for small, medium, large and xlarge breakpoint. So if we wan to have responsive gutters we should do:

.block {
  @include xy-cell(6);
  @include breakpoint(medium) {
    @include xy-cell(6);
  }
  @include breakpoint(large) {
    @include xy-cell(6);
  }
  @include breakpoint(xlarge) {
    @include xy-cell(6);
  }
}

@ncoden Am i missing something here?