Xy Grid - Class="Grid-Container"

I´m using the new XY-Grid from now on, but I´m not really clear about the class "grid-container". The grid-container just marks the max-width of the Foundation-Grid, am I right?

For what case do I need the class "grid-container full"? I do have the same output just without it. I mean, if I do it that way:

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

Thanks a lot!

1 Answer

The docs at describe it a bit:

The grid defaults to the full width of the available space. To contain it horizontally use the grid-container class. The container will be centered and have a max-width equal to your $grid-container setting (1200px by default), along with padding on the left/right equal to half your $grid-container-padding setting.

And the full class is also described at :

To stretch the content to the full width of the available space and remove grid container padding, simply add the class full to your grid-container. Note that this variation is primarily for use for the grid-margin-x - it works with grid-padding-x too, but will work the same as .grid-container.fluid.

The full class removes the padding from the grid container.

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

The following applies padding-right: 0 and 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}");
    }
  }
}
7

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Chloe Bennett

Chloe Bennett

Culture, Media & Entertainment Columnist

Chloe Bennett explores the intersection of pop culture, streaming entertainment, digital trends, and contemporary lifestyle. Her weekly commentary reaches thousands of culture enthusiasts.

Share this article
Twitter Facebook Pinterest