CSS网格布局-其他浏览器支持

Question

我希望在我的CSS网格布局中增加一层浏览器支持。我已经为实际CSS加上了前缀，但是也喜欢该编码器添加了更多内容的方式...

Other Coder - Blueprint Fallback Example

我的SASS网格布局代码以及下面的后备代码。寻找验证，我的后备代码可以使用，也可以进行修改。最终将通过JavaScript调用后备样式表。

预先感谢-我是一名试图学习的学生：）

我的网格代码：

// sass-lint:disable no-important no-vendor-prefixes

// Grid Variables
$cols: 12 !default;
$gutter: 50px !default;
$margins: 50px !default;

// Breakpoints
$breakpoints: (
  (l, 1199.98px, 100%, 1),
  (m, 991.98px, 100%, 1),
  (s, 767.98px, 100%, 2),
  (x, 575.98px, 100%, 3),
  (no, 0, 100%, 3)
) !default;

// Animation
$grid-animation: all 1s;

// Globals
html {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

*,
*::after,
*::before {
  box-sizing: inherit;
}

* {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font: inherit;
  font-kerning: normal;
}

// Grid
.container {
  background-color: #0ff;
  display: block;
  max-width: 100%;
  padding: 0 $margins;
  position: relative;
  width: 100%;
}

.fluid {
  max-width: 100% !important;
  width: 100% !important;
}

.r {
  background-color: #eff;
  display: grid !important;
  grid-gap: $gutter;
  grid-template-columns: repeat($cols, 1fr);
  position: relative;
  transition: $grid-animation;
}

.nest {
  background-color: #0ff;
  display: grid !important;
  grid-gap: $gutter;
  grid-template-columns: repeat($cols, 1fr);
  position: relative;
  transition: $grid-animation;
}

[class*='c-'] {
  background-color: #faebd7;
  grid-column: span $cols;
  position: relative;
}

@for $i from 1 through $cols {
  .c-#{$i} {
    grid-column: span $i;
  }
}

.top {
  align-items: start;
}

.middle {
  align-items: center;
}

.bottom {
  align-items: end;
}

.left {
  justify-items: start;
}

.center {
  justify-items: center;
}

.right {
  justify-items: end;
}

.stretch {
  align-items: stretch;
  justify-items: stretch;
}

.gap-no {
  grid-gap: 0;
  margin-bottom: 0;
}

.gap-c-no {
  grid-column-gap: 0;
}

.gap-r-no {
  grid-row-gap: 0;
  margin-bottom: 0;
}

.first {
  order: 1;
}

.last {
  order: $cols;
}

.hide {
  display: none !important;
}

.show {
  display: initial !important;
}

@each $name, $size, $container, $divide in $breakpoints {
  @media only screen and (max-width: $size) {
    .container {
      max-width: $container;
      padding: 0 $margins / $divide;
      width: $container;
    }

    .full {
      max-width: 100% !important;
      width: 100% !important;
    }

    .r {
      grid-gap: $gutter / $divide;
    }

    .nest {
      grid-gap: $gutter / $divide;
    }

    @for $i from 1 through $cols {
      .#{$name}#{$i} {
        grid-column: span $i;
      }
    }

    .left-#{$name} {
      justify-items: start;
    }

    .center-#{$name} {
      justify-items: center;
    }

    .right-#{$name} {
      justify-items: end;
    }

    .first-#{$name} {
      order: 1;
    }

    .last-#{$name} {
      order: $cols;
    }

    .hide-#{$name} {
      display: none !important;
    }

    .show-#{$name} {
      display: initial !important;
    }
  }
}

我的FALLBACK代码

// sass-lint:disable no-important no-vendor-prefixes

// Grid Variables
$cols: 12 !default;
$gutter: 50px !default;
$margins: 50px !default;

// Breakpoints
$breakpoints: (
  (l, 1199.98px, 100%, 1),
  (m, 991.98px, 100%, 1),
  (s, 767.98px, 100%, 2),
  (x, 575.98px, 100%, 3),
  (no, 0, 100%, 3)
) !default;

@for $i from 1 through $cols {
  .c-#{$i} {
    width: calc(#{percentage($i / $cols)} - #{$gutter / 2}) !important;
  }
}

@mixin blueprint-fallback {
  .r,
  .nest {
    display: block !important;

    &::after {
      content: ' ';
      display: block;
      width: 100%;
    }
  }

  .r,
  .next {
    display: block !important;
    width: 100% !important;
  }

  .r > *,
  .nest > * {
    display: block !important;
    float: left !important;
    margin: 0 #{$gutter / 2} #{$gutter / 2} 0;

    &:last-child {
      margin-right: 0;
    }
  }

  @for $i from 1 through $cols {

    .r > .c-#{$i},
    .r .c-#{$i} > *,
    .nest > .c-#{$i},
    .nest .c-#{$i} > * {
      width: calc(#{percentage($i / $cols)} - #{$gutter / 2}) !important;
    }
  }

  @each $name, $size, $container, $divide in $breakpoints {
    @media only screen and (max-width: $size) {
      .show-#{$name} {
        display: block !important;
      }
    }
  }
}

// ie11
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  @include blueprint-fallback()
}

@supports not (display: grid) {
  @include blueprint-fallback()
}