Foundation 6.2 Large Gutter Size

Question

According to Foundation 6.2 documentation default grid gutter size for small is 20px and for medium is 30px, but did not mention for large. What is the default gutter size for large?

Answer 1

Looking at _grid.scss on the Foundation GitHub page:

/// The amount of space between columns at different screen sizes. To use just one size, set the variable to a number instead of a map.
/// @type Map | Length
/// @since 6.1.0
$grid-column-gutter: (
  small: 20px,
  medium: 30px,
) !default;

and _column.scss:

// Gutters
  @if type-of($gutter) == 'map' {
    @each $breakpoint, $value in $gutter {
      $padding: rem-calc($value) / 2;

      @include breakpoint($breakpoint) {
        padding-left: $padding;
        padding-right: $padding;
      }
    }
  }

There is no large gutter defined as the docs say. So in this case large gutters would be the same as medium since Foundation uses mobile first.

You could add a custom large gutter by doing something like this:

$grid-column-gutter: (
  small: 20px,
  medium: 30px,
  large: 50px
) !default;