I'm not understanding how Susy calculates widths for it's grids. I have a 9 column grid which is nested inside a 12 grid column and the widths aren't calculated as I would expect them to be. Here are my settings:
$susy: (
columns: 12,
column-width: 60px,
gutters: 2/5,
math: static,
global-box-sizing: border-box
);
So my main column has @include span(last 9 nest);
. So inside that 9 column grid cell if I create another cell using @include span(1 of 9 inside);
shouldn't the output css be:
{
width: 60px;
padding: 0 12px;
}
Instead what I'm getting is:
{
width: 84px;
padding: 0 12px;
}
What I want is the total column width to be 60 pixels, which is what I expect a single column width to be, and then add padding on the left and right. Is there a way to tell Susy not to add the width to the column width? Also I using padding instead of margin because I need the columns to be flush with each other.
Here's a screenshot of what the grid needs to look like.