no-grid.scss

/// Wraps ruleset within media and @supports queries that only affect browsers that don't support grid.
@mixin no-grid {
  @media (-ms-high-contrast: none), (-ms-high-contrast: active) {
    @content;
  }
  @supports not (display: grid) {
    @content;
  }
}

// Usage
.selector {
  @include grid-container; // Assume this holds the grid content rules.
  
  @include no-grid {
    // Insert flexbox fallback code
  }
}

// Will compile down to the following:
.selector {
  display: grid;
  grid-template-rows: repeat(12, 1fr);
  grid-column-gap: 30px;

  /* the -ms-high-contrast mq only affects IE10/IE11 */
  @media (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* Flexbox fallback code */
  }
  
  @supports not (display: grid) {
    /* Flexbox fallback code */
  }
}