Search code examples
susy-compass

Grid width is not 960px

I might be missing something basic, but why susy grid does not amount to 960px?

$total-columns  : 12;             // a 12-column grid
$column-width   : 60px;            // each column is 4em wide
$gutter-width   : 10px;            // 1em gutters between columns
$grid-padding   : $gutter-width;  // grid-padding equal to gutters

$container-style: static;

.susy-container {
   @include container;
}

And I get the width 830px. Any idea why it's not 960px like other grids?

Solution

  • Try your math again:

    (12*60) + (11*10) = 830

    The official 960 Grid System uses 20px gutters, and 10px grid-padding:

    $total-columns  : 12;
$column-width   : 60px;
$gutter-width   : 20px;
$grid-padding   : 10px;

    That should give you what you are looking for. 

    (12*60) + (11*20) + (2*10) = 960