In a grid system, the gutter is the spacing added between columns. Foundation has been using a 30 pixel wide gutter as long as we can remember. It’s always been possible to change the gutter size, either by creating a custom download or using the Sass version of Foundation.

However, at times you may find that one gutter size doesn’t fit all screens. Maybe you want something more narrow than 30 pixels on a small screen, where you have less horizontal screen space. Or, on a larger screen, you want to create more space between columns to prevent your layout from feeling too cramped.

In Foundation 6.2, we’ve introduced responsive gutters, which allow you to define different gutter widths on different screen sizes! It’s an opt-in feature that’s very easy to set up. To use this feature, you need to be using the Sass version of Foundation.

Adding Gutters

The Sass variable $grid-column-gutter defines the global gutter width. This value is divided in half and then applied as padding-left and padding-right on every column. (That means that when two columns touch, their padding combines to equal the width of $grid-column-gutter.)

By default the value is a single number. This means responsive gutters are disabled.

$grid-column-gutter: 30px;.

To change to responsive gutters, change the variable to a map. Each key is the name of a breakpoint, and the value is the width the gutters should be on that screen size. Here’s a simple example that uses just small and medium:

$grid-column-gutter: (
  small: 20px,
  medium: 30px,
);

With these settings, gutters are 20px wide by default, and on devices wider than 640px, gutters expand out to be 30px wide.

We can reference any breakpoint referenced in our global $breakpoints variable, which looks like this by default:

$breakpoints: (
  small: 0,
  medium: 640,
  large: 1024,
  xlarge: 1200,
  xxlarge: 1440,
);

That means we could define gutter widths for screen sizes all the way up to xxlarge!

Note that it’s also okay to skip breakpoints. Remember that the values are applied mobile-first. So, for example, if you only define a small and large gutter, then on medium screens, the small value will be used.

  $grid-column-gutter: (
    small: 30px,
    large: 50px,
  );

---