Search code examples
cssgridsusy-compass

How to include padding in column width with Susy

.main {
   background: green;
   @include span-columns(9,12);
}

Is there an easy or inbuilt way in Susy to include , say, a 10px padding inside .main keeping its initial width intact so that the green background doesnt bleed ?

Thanks in advance, and sorry if a version of this question has been asked before.

Solution

  • There are two options:

    1. Use box-sizing: border-box; - this is now supported by all the major browsers, and Compass has a handy box-sizing() mixin to take care of prefixes for you. If you use it everywhere (like I do), it can change the size of a Susy container, but Susy comes with the handy mixin to fix all that for you. Simply add this at the root, before you set your containers - it will set the box model, and let Susy know to adjust for it:

      @include border-box-sizing;

    2. Use the $padding argument (docs) to the span-columns mixin. With this approach you are limited to the same units you used for declaring your grid - and just like those, these will be converted to fluid values if they aren't fluid already.

    You can see why option #1 is way better, as long as you are OK leaving IE7 out of the fun.