CSS display: grid; をサポートしているブラウザにはGridレイアウト、そうでないブラウザにはFlexboxレイアウトを適用させるCSSの書き方を紹介します。

display: grid; をサポートしている主要ブラウザ

https://caniuse.com/#feat=css-gridを参考にdisplay: grid; をサポートしている主要ブラウザをまとめてみました。

ブラウザ名 grid使えない最終Version grid使えるVersion
IE 11 (partial support) なし
Edge 15 (partial support) 16
Safari 10 10.1
iOS Safari 10.2 10.3
Android 4.4.4 5.0
Firefox 51 52
Chrome 56 57
Opera 43 44

IEとEdgeは-msprefixがついた独自プロパティで部分的に対応しています。
iOS Safariが案外新しめのバージョンまで使えないので注意です。

機能クエリ@supportsを使って実装

機能クエリ @supports を使いdisplay: grid;に対応しているブラウザとそれ以外に別のスタイルを出し分けます。

/*例*/
.box {
  display: flex;
  flex-wrap: wrap;
}
@supports (display: grid) {
  .box {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: repeat(3, 1fr);
  }
}

簡単ですね！

元記事はこちら

「@supportsを使ってCSS display: grid; をサポートしているブラウザにGridレイアウト、そうでないブラウザにはFlexboxレイアウトを適用」