Susy grid with susy-breakpoint and fixed gutters

Question

I have started to use Susy and I'm very much impressed with it's capabilities. At the moment I'm creating a web where I have 4 media queries:

$mobile: 767px;
$tablet: 768px;
$small: 960px;
$large: 1200px;

for last two $small and $large I want to have two columns with fixed width in px and 10px gutters. I don't want gutters in % bacause I want to ba sure that across all browsers the result will look equal.

So for fixed colomnus I use susy-breakpoint

@include susy-breakpoint($small, 24 1/1.5 split) {
    .container {
        @include container($small);
    }
    .main{
        .navigationWrap{
            @include span(24);
        }
        .articleWrap {
            @include span(668px);
        }
        .advertisment {
            @include span(240px);
            .advBanner{
                float: right;
            }
        }
    }

} // END of 960px mq

@include  susy-breakpoint($large, 24 1/1.5 split) {

    .container {
        @include container($large);
    }

    .main{
        .navigationWrap{
            @include span(24);//span(4);
        }
        .articleWrap {
            @include span(900px);
        }
    }

} // END of 1200px mq

so, my main question: what is the way and best practice to make gutters fixed not % (like 1/1.5) to have more control over the grid?

Since no one is answearing, I fugured out "my own way" to get the fixed gutters and colomns.

the settings are:

$susy: (
  columns: 24,
  column-width: 40px,
  gutter-width: 10px,
  grid-padding: 10px,
  gutter-position: split,
  global-box-sizing: content-box,
  math: static
);

and main scss:

//from 960px to 1200
@include breakpoint($small) {
    .container {
        @include container($small);
    }
    .header{
        .header-logoWrap{
            @include span(242px);
        }
        .header-bannerWrap {
            @include span(678px);
            img {
                float: right;
            }
        }
    }
    .main{
        .navigationWrap{
            @include span(930px);
        }
        .articleWrap {
            @include span(670px);
        }
        .advertisment {
            @include span(250px);
            .advBanner{
                float: right;
            }
        }
    }

} // END 960px to 1200

// from 1200 final
@include breakpoint($large) {
    .container {
        @include container($large);
    }
    .header{
        .header-logoWrap{
            @include span(242px);
        }
        .header-bannerWrap {
            @include span(918px);
            img {
                float: right;
            }
        }
    }   
    .main{
        .navigationWrap{
            @include span(1170px);
        }
        .articleWrap {
            @include span(910px);
        }
        .advertisment {
            @include span(250px);
            .advBanner{
                float: right;
            }
        }
    }
} // END of 1200px mq

But the main question is still open: -what is the best practice to have fixed grid and gutters?

In a code I've suggested, I'm using

span( px)

how do I setup $susy in case I dont use span with colums in %

columns: 24, column-width: 40px,

Answer 1

Your settings map is using a mix of susy1 and susy2 terminology. Most of those settings are being ignored by Susy. I think this is what you want:

$susy: (
  columns: 24,
  column-width: 40px,
  gutters: 10px/40px, 
  gutter-position: split,
  global-box-sizing: content-box,
  math: static
);

The gutters setting is always relative, but the output won't be - since you are using static math. You can also have static gutters in a fluid grid, but that's a different issue. There are no settings called gutter-width or grid-padding', so those have been removed. Split gutters will leave you with half-gutter padding on the grid ( grid-padding', so those have been removed. Split gutters will leave you with half-gutter padding on the grid ( 5px ). If you want a full ). If you want a full 10px` at the edges, you can do something like this:

.container {
  padding: 0 gutters();
}