csssasssusy

How to specify 2.5% gutters for a 12 Column Susy Grid

I have a mobile first website with two different grid settings. Till 600px:

$sm-screen-grid: (
  columns: 5,
  gutters: 1 / 3
);

Those gutters show as 2.5% padding, still trying to figure out how is that exactly being calculated. After 600 I switch to a 12 column grid. My problem is that I want the gutter width to still be 2.5%. I cannot seem to figure out what values to specify for gutters so it renders as:

padding-left: 2.5%;
padding-right: 2.5%;

fora a container.

Any advice?

Solution

  • Susy's math changes depending on gutter-position. Based on that output, I'd guess you are using the inside setting. That math looks like:

    // target-width / context-width * 100%
$single-gutter: $gutters / ($columns + ($gutters * $columns)) * 100%;

    In your case, the result of that equation is 5%, which is divided between the left and right padding – 2.5% each. As far as I can tell, a 12-column grid would need gutters set to 1.5 in order to get the same result. That means, to keep an exact 2.5%, your gutters will be larger than your columns.

    Remember that percentage-padding is calculated in reference to the containing element, not the element being padded. So keep the % the same will not keep the ratio of column-to-gutter the same. If you are trying to have gutters always 2.5% of the column, you should change the gutter setting to .25 and leave it there. The percentage output will change, but the ratio of column-to-gutter will stay the same with any number of columns.