Susy grid - increasing outer container gutters on split

Question

I'm building a website using Susy grid, using split gutters (gutters on every side of the column). But the outer flexible gutters are really thin on the side of the pages, especially on mobile devices. Is there way to append wider outer gutters to my container mixin?

Answer 1

The best way is to simply add padding to the container element.

.container {
  @include container;
  padding: 0 $my-container-padding;
  box-sizing: content-box; // optional...
}

You can consider changing the container box-sizing to content-box if you want the padding added to your container width, rather than removed. Play around and see what works best for you.