grid で自動配置したいけど IE11 が無理なので flex で誤魔化す Mixin

grid 楽なんで超使いたいけど、自動配置が無理で子要素に個別設定が必要。
でも使いたいんで flex でフォールバック。
でも auto-fit で minmax とかが無理なんで、固定分割で誤魔化す。

Mixin

@mixin coord($col, $col-msie, $width, $gap-column: 0, $gap-row: 0) {
  display: grid;
  grid-template-columns: repeat($col, $width);
  gap: $gap-row $gap-column;
  .is-msie & { // IE判定クラス
    display: flex;
    flex-wrap: wrap;
    & > * {
      width: calc((100% - 1px - #{$gap-column * ($col-msie - 1)}) / #{$col-msie});
      margin-left: $gap-column;
      &:nth-child(#{$col-msie}n #{"-"} #{$col-msie - 1}) {
        margin-left: 0;
      }
      &:nth-child(#{$col-msie}) ~ * {
        margin-top: $gap-row;
      }
    }
  }
}

※ JavaScript でクラス振る前提（好きじゃないけどCSSハックに差し替えてもよいかも）

3分割する場合

@include coord(3, 3, 1fr, 20px, 20px);

最低幅 300px でフィットさせつつ IE11 は無理なんで常に3分割する場合

@include coord(auto-fit, 3, minmax(300px, 1fr), 20px, 20px);

IE11 について

本来 IE11 の対応なんてするべきものじゃない。
そんなん制作してる側のエゴだ。
どうしてもってんで、泣く泣く対応してるだけ。
IE11 で見てる人にはそんなぞんざいな対応で良い。
というか見れるように対応してるだけ、ありえないくら素晴らしい。