CODEWITHSUNDEEP
susy-compass
mbdev
mbdev

Reputation: 6563

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?

Upvotes: 0

Views: 672

Answers (1)

Miriam Suzanne
Miriam Suzanne

Reputation: 14010

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

Upvotes: 3

Related Questions