XY Grid - class = "grid-container" - PullRequest
Новая
       42

XY Grid - class = "grid-container"

0 голосов
/ 18 марта 2020

С этого момента я использую новую XY-Grid, но я не совсем уверен насчет класса "grid-container". Сетка-контейнер просто отмечает максимальную ширину Foundation-Grid, я прав?

В каком случае мне нужен класс "grid-container full"? У меня такой же вывод только без него. Я имею в виду, если я сделаю это так: 

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

Большое спасибо!

1 Ответ

0 голосов
/ 18 марта 2020

Документы в https://get.foundation/sites/docs/xy-grid.html#grid -контейнере описывают это немного:

По умолчанию для сетки используется полная ширина доступного пространства. Для горизонтального размещения используйте класс grid-container. Контейнер будет отцентрирован и будет иметь максимальную ширину, равную вашей настройке $ grid-container (по умолчанию 1200 пикселей), а отступы слева / справа равны половине вашей настройки $ grid-container-padding.

И класс full также описан в https://get.foundation/sites/docs/xy-grid.html#grid -container-full :

Чтобы растянуть содержимое до полной ширины доступного пространства и удалите заполнение контейнера сетки, просто добавьте класс полностью к вашему контейнеру сетки. Обратите внимание, что этот вариант предназначен в основном для grid-margin-x - он работает и с grid-padding-x, но будет работать так же, как .grid-container.fluid.

The * Класс 1020 * удаляет заполнение из контейнера сетки.

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}");
    }
  }
}
...