display:gridとflexの使い分け

Question

グリッドレイアウトを勉強しているのですが、display:gridでなんでもできる感じがして、display:flexの使い所がわかりません。
この２つの使い分けを知りたいです。

Answer 1

flexは縦方向、横方向のどちらか１次元であるのに対して、
gridは縦方向、横方向の２次元の指定が可能です。

flexは縦、横どちらか片方向のレイアウト向きですが、
デフォルトが横なのでどちらかというと横方向のレイアウトに向いてます。
display:flexとつけるだけで、とりあえず横方向にはなりますからgirdよりはシンプルに書けますね。
ただ単に縦に並べたいとか、横に並べたいとかであればflexでしょう。

商品一覧とかのサムネイル表示とかでも、flex-warpすれば格子状に表示することはできますけど、
縦方向が発生してる時点でgridの方が向いてるような気はします。
ヘッダ、サイド、メイン、フッターとかの全体のレイアウトはgridが最高にはまります。

全体レイアウトはgrid、各部分のレイアウトはflex、ただし２次元になる場合はgridもあり。
という感じで使い分けてます。

Answer 2

ブラウザ幅が大きいなら

(↓各セルは最小幅を設定、ブラウザ幅に合わせ横に伸縮・段落ち)
□□□□ (1-4)
□□□□ (5-6)

ブラウザ幅を狭めると

□□□ (1-3)
□□□ (4-6)
□□ (7-8)

このようなレスポンシブな格子状レイアウトは、
flexbox なら簡単に実装できます。
多段になって縦方向が発生しても、
セマンティック的には「単なるリスト」なので
なんら問題はありません。

CSS Grid でも
grid-template-columns: repeat(auto-fit…
を使えば簡単にできるのですが、IEが対応していないので、IEを無視できないサイトなら実質使えません。(autoprefixer も対応していない)
もしできたとしても、かなり複雑で見通しの悪いコードになるでしょう。

Answer 3

flexは要素内にどのような法則(左から右に、右端で折り返すなど)でアイテムを並べるかを指定して、その法則に従って子アイテムを流し込む
gridは要素内をグリッド状のセルに分割して、セルに子アイテムをはめ込む
といったイメージです。

子アイテムの大きさや数にあわせてそれを並べて表示させたいときはflex、あらかじめレイアウト枠が決まっておりそこにアイテムをはめ込んでいきたいときはgridを使うとよいと思います。