Menu icon Foundation
XY Grid - SASS - columns margins

I am new to the XY Grid so please bear with me! :-)

I'm currently building a 4 blocks layout like this:

 

 

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)

How can I achieve this with SASS? I think the SASS documentation is really lacking some examples... (In my opinion all CSS Classes examples should have their SASS equivalent...)

xy-gridSassgutters

I am new to the XY Grid so please bear with me! :-)

I'm currently building a 4 blocks layout like this:

 

 

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)

How can I achieve this with SASS? I think the SASS documentation is really lacking some examples... (In my opinion all CSS Classes examples should have their SASS equivalent...)

Pierre B 10 months ago

 I would like to remove the white gutters between the blocks (I drew the red arrows to point them out on my screenshot)

How can I achieve this with SASS? I think the SASS documentation is really lacking some examples... (In my opinion all CSS Classes examples should have their SASS equivalent...)