0

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?

sayayin
  • 971
  • 5
  • 23
  • 36

1 Answers1

0

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.

Miriam Suzanne
  • 13,632
  • 2
  • 38
  • 43
  • Thank you so much for explaining this. I was going crazy trying to find out how this all works with Susy. I have seen some videos but don't think any of them explain this in detail. Could you please direct me to some resources so I understand these sort of things better? – sayayin Jun 30 '17 at 13:30
  • I'm not sure if a good resource for that exists. Maybe I should write one? – Miriam Suzanne Jul 01 '17 at 21:16
  • That would be great because the calculation for gutters has been the most confusing part for me and I'm sure it is not that confusing but just that there are not enough resources out there that explain this. – sayayin Jul 11 '17 at 16:07