SU-SWS/decanter

///
/// A mixin to create a responsive grid layout.
///
/// @name responsive-su-grid-columns
///
/// @param {map} $grid-map - A sass map with the columns per breakpoint.
/// @param {map} $gutters-map - A complimentary map to the $grid-map.
/// @param {bool} $ie-fix-mobile - Set the mobile breakpoint to block for IE 11.
///
/// @group mixin
@mixin responsive-grid-columns($grid-map: $su-responsive-columns-default, $gutters-map: $su-responsive-gutters-default, $ie-fix-mobile: true) {
  @include display-grid;

  /// Loop through each breakpoint generating the media query and grid.
  @each $breakpoint, $columns in $grid-map {

    /// Media Query is passed in.
    @media #{$breakpoint} {

      /// Add column and row gaps based on the responsive breakpoint sizes.
      /// These gaps increase as screen sizes get larger.
      @include grid-gap(map-get($gutters-map, $breakpoint));

      /// Create the grid.
      @include grid-columns($columns);
    }
  }

  /// IE 11 FIX.
  @if $ie-fix-mobile {
    @include grid-media-only('xs') {
      display: block;
    }
  }
}