// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source

////
/// @group xy-grid
////

/// Creates a max width container, designed to house your grid content.
///
/// @param {Number} $width [$grid-container] - a width to limit the container to.
@mixin xy-grid-container(
  $width: $grid-container
) {
  max-width: rem-calc($width);
  margin: 0 auto;
}

/// Creates a container for your flex cells.
///
/// @param {Keyword} $direction [horizontal] - Either horizontal or vertical direction of cells within.
/// @param {Boolean} $wrap [true] - If the cells within should wrap or not.
@mixin xy-grid(
  $direction: horizontal,
  $wrap: true
) {
  $direction: if($direction == 'horizontal', row, column);
  $wrap: if($wrap, wrap, nowrap);

  display: flex;
  flex-flow: $direction $wrap;
}

// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source

////
/// @group xy-grid
////

/// Creates a max width container, designed to house your grid content.
///
/// @param {Number} $width [$grid-container] - a width to limit the container to.
@mixin xy-grid-container(
  $width: $grid-container
) {
  max-width: $width;
  margin: 0 auto;
}

/// Creates a container for your flex cells.
///
/// @param {Keyword} $direction [horizontal] - Either horizontal or vertical direction of cells within.
/// @param {Boolean} $wrap [true] - If the cells within should wrap or not.
@mixin xy-grid(
  $direction: horizontal,
  $wrap: true
) {
  $direction: if($direction == 'horizontal', row, column);
  $wrap: if($wrap, wrap, nowrap);

  display: flex;
  flex-flow: $direction $wrap;
}

Remove `rem-calc` use for `xy-grid-container`
Remove `rem-calc` use for `xy-grid-container`

This allows for more flexible widths, eg `vw`. See https://github.com/zurb/foundation-sites/issues/10141#issuecomment-310682672 for details.