Foundation 6.2 大排水沟尺寸

Question

根据 Foundation 6.2 文档，小型的默认网格间距大小为 20px，中型为 30px，但未提及大型。 large 的默认装订线尺寸是多少？

Answer 1

查看基金会 GitHub 页面上的 _grid.scss：

/// 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;

和_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;
      }
    }
  }

文档中没有定义大间距。所以在这种情况下，大间距与中等间距相同，因为 Foundation优先使用手机。

您可以通过执行以下操作来添加自定义大排水沟：

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