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

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);
  }
}

簡単ですね！