// CSS Grid mixin with flexbox fallback for IE and Edge
@mixin grid($columns, $max_width: 1fr, $min_width: 0, $min_height: 0, $max_height: auto, $gutter_x: 16px, $gutter_y: 16px) {
  display: grid;
  grid-auto-rows: minmax($min_height, $max_height);
  grid-gap: $gutter_x;
  grid-row-gap: $gutter_y;
  grid-template-columns: repeat($columns, minmax($min_width, $max_width));

  // For browser versions that do not support CSS grid
  @supports not (display: grid) {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;

    > div {
      $grid_width: 100% / $columns;
      margin-bottom: $gutter_y;
      margin-right: $gutter_x;
      width: calc(#{$grid_width} - #{$gutter_x});

      &:nth-child(#{$columns}n+#{$columns}) {
        margin-right: 0;
      }
    }
  }

  // Internet Explorer
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;

    > div {
      $grid_width: 100% / $columns;
      margin-bottom: $gutter_y;
      margin-right: $gutter_x;
      width: calc(#{$grid_width} - #{$gutter_x});

      &:nth-child(#{$columns}n+#{$columns}) {
        margin-right: 0;
      }
    }
  }

  // Edge
  @supports (-ms-ime-align: auto) {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;

    > div {
      $grid_width: 100% / $columns;
      margin-bottom: $gutter_y;
      margin-right: $gutter_x;
      width: calc(#{$grid_width} - #{$gutter_x});

      &:nth-child(#{$columns}n+#{$columns}) {
        margin-right: 0;
      }
    }
  }
}