sasszurb-foundationzurb-foundation-6gutter

XY Grid - SASS - columns margins / gutters

I'm currently building a 4 blocks layout with Zurb Foundation 6.5.0 like this:

enter image description here

Here is my current code:

.blocks_4 {

    @include xy-grid;
    text-align: center;

    div {
        @include breakpoint(small) {
          @include xy-cell(12);
        }

        @include breakpoint(medium) {
          @include xy-cell(3);
          // @include xy-cell(3, $gutter-output: false);
        }

    }
}

I would like to remove the white gutters between the blocks (I drew the red arrows to point them out on my screenshot) so that they are sticking together and using the whole page width.

How can I achieve this with SASS? The SASS Foundation documentation is really lacking some examples... I tried using the $gutter-output: false but it's not working.

Solution

  • Silly me. The answer was simple: 

    @include xy-cell(3, $gutters:0);