How to add left and right padding to containers in Susy 2.0

Question

I'm using Susy 2.0. I'm building a fixed-width site (that will become responsive in a later phase). However, I think my question applies when using Susy as static or fluid.

Here are my global settings:

$susy: (
 container: auto, 
 columns: 12,  
 column-width: 62px,
 math: static, 
 gutters: 1/3,
);

As per the Susy 2.0 docs with regard to static sites, I've set container to be auto and I'm letting the column-width settings dictate the width of my container elements.

I would like to apply a bit of left and right padding to containers, just so that there's a little bit of breathing space on either side when the viewport narrows on mobile, etc.

What's the best way of doing this? If I simply apply padding-left and padding-right (in plain CSS) to my container element, this breaks the grid. The container is no longer wide enough to contain Susy's column width calculations.

I have 'box-sizing' universally set to 'border-box' in my CSS. If I override this on my container element, with 'content-box', then the grid behaves correctly. I'd have expected the opposite actually?

Is the solution to apply 'box-sizing: content-box' to my container elements? Or is there a setting in Susy I can apply that I'm missing? I feel like there probably is. I'd rather let Susy handle all grid calculations if possible.

My question also applies to responsive/fluid design too, as I still have the same issue even if I give the container setting a specific width and remove the 'column-width' and 'math' settings.

Answer 1

At the moment, setting content-box on the container and adding your own padding is the best way to go. While border-box is more sensible for most things, there are times when content-box makes sense, and in my opinion this is a great example. It works because Susy is setting your container width, and your padding adds to that, rather than being subtracted, which means you still have the space you need for the grid.

I'd be willing to consider some type of grid-padding feature again, but in Susy 1 it seemed like it caused more problems than it solved. I'll have to think through better ways we might do it. If you have ideas, I'm always interested!

Answer 2

For grid paddings I'll usually do something like this. Works great and theres no need for further complication :)

.container {
  @include container($susy); 
  padding-left: 15px; 
  padding-right: 15px; 
}