XY网格-class=“网格-容器”

Question

从现在开始，我正在使用新的XY-Grid，但我对“网格容器”类并不十分清楚。网格容器只是标志着基金会网格的最大宽度，对吗？

对于哪种情况，我需要类“网格容器满”？没有它，我也有相同的输出。我是说，如果我那样做：

<div class="grid-x grid-margin-x">
    <div class="cell small-12">cell</div>
       Content
    </div
</div>

非常感谢!

Answer 1

https://get.foundation/sites/docs/xy-grid.html#grid-container的文档对此做了一点描述：

网格默认为可用空间的全部宽度。若要水平地包含它，请使用网格容器类。容器将居中，其最大宽度等于$grid容器设置(默认为1200 max)，左边/右侧的填充等于$grid容器填充设置的一半。

full类也在https://get.foundation/sites/docs/xy-grid.html#grid-container-full中进行描述。

将内容扩展到可用空间的全部宽度，并删除网格容器填充，只需将类full添加到网格容器中即可。请注意，这种变化主要用于网格边缘-x-它也适用于网格填充-x，但它的工作方式与.格栅-容器.流体相同。

full类从网格容器中删除填充。

https://github.com/foundation/foundation-sites/blob/v6.6.1/scss/xy-grid/_classes.scss#L21

https://github.com/foundation/foundation-sites/blob/v6.6.1/scss/xy-grid/_grid.scss#L15

https://github.com/foundation/foundation-sites/blob/v6.6.1/scss/xy-grid/_gutters.scss#L15

  // Grid Container
  .grid-container {
    @include xy-grid-container;

    &.full {
      @include xy-grid-container(100%, 0);
    }
  }

/// @param {Number} $width [$grid-container] - a width to limit the container to.
/// @param {Number} $padding [$grid-container-padding] - paddings of the container.
@mixin xy-grid-container(
  $width: $grid-container,
  $padding: $grid-container-padding
) {
  @include xy-gutters($gutters: $padding, $gutter-type: padding);

以下应用padding-right: 0和padding-left: 0

/// Create gutters for a cell/container.
///
/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.
/// @param {Keyword} $gutter-type [margin] - Type of gutter to output. Accepts either margin or padding.
/// @param {List} $gutter-position [right left] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination.
/// @param {Boolean} $negative [false] - Whether to apply the gutter as a negative value. Commonly used for nested grids.
@mixin xy-gutters(
  $gutters: $grid-margin-gutters,
  $gutter-type: margin,
  $gutter-position: right left,
  $negative: false
) {
  $operator: if($negative, '-', '');

  // If we have declared negative gutters, force type to `margin.
  $gutter-type: if($negative, 'margin', $gutter-type);

  // Output our margin gutters.
  @if (type-of($gutters) == 'map') {
    @include -zf-breakpoint-value(auto, $gutters) {
      $gutter: rem-calc($-zf-bp-value) / 2;

      // Loop through each gutter position
      @each $value in $gutter-position {
        #{$gutter-type}-#{$value}: unquote("#{$operator}#{$gutter}");
      }
    }
  }
  @else if (type-of($gutters) == 'number') {
    $gutter: rem-calc($gutters) / 2;

    // Loop through each gutter position
    @each $value in $gutter-position {
      #{$gutter-type}-#{$value}: unquote("#{$operator}#{$gutter}");
    }
  }
}