How to remove gutter for first and last element of row in Susy grid

Question

How can i completely remove gutters for first and last elements of row while using susy grid?

This is my mockup markup.

http://codepen.io/anon/pen/mVBmLY

$susy:(
columns: 12,
gutters:2,
gutter-position:split,
    );

ul{
    @include container(800px);
}

li{
    @include span(4);
}

It uses "gutter-position:split". As you can see on codepen, first and last element in row still have their outside margins.

I can work around this by setting gutter-position to "after" and using "last" keyword on last element in row.

http://codepen.io/anon/pen/eJGWKE

$susy:(
columns: 12,
gutters:2,
gutter-position:after,
    );

ul{
    @include container(800px);
}

li{
    @include span(4);
}

 li:nth-of-type(3n+3){
        @include span(last 4);
 }

Is there any other way? Using nht-of-type selector kinda defies point of using grid for me.

Answer 1

After bit of experimenting, i managed to create mixin that provides such functionality:

@mixin new_span($elements){

@include span($elements);

$n: map-get($susy, columns)/$elements;

&:nth-of-type(#{$n}n +#{$n}){

    @include span(last $elements);

}

}

Keep in mind that in order to work, it needs gutter-position set to after.

It is meant do be usd in same way as oryginal susy span mixin. I tested it on my mock-up grid and it worked, thought it might need some more testing.

Answer 2

Here's the codepen fork

Much easier to do this by using gutter-position:after, and using nth-child selector in your li to find the last element. So if you want 3 colums in a row you'd do nth-child(3n+1) and say @include span(4 last):

@import "susy";

$susy:(

columns: 12,
gutters:2,
gutter-position:after,

    );

ul{
    @include container(800px);
}

li{
    @include span(4);
  &:nth-child(3n+1) {
    @include span(4 last);
  }
}