CSS Grid と Flexbox の使い分け

ざっくり言うと

Grid は、コンテナベース
Flexbox は、アイテムベース

Grid は、セルの大きさをコンテナ側で制御する時
Flexbox は、セルの大きさをアイテム側の幅・高さに合わせたい時

具体的には

Grid は、以下のようなレイアウトを実現したい時。レスポンシブの対応などで、列や行を超えて表示位置をコントロールしたい場合に便利です。

<div>
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

Flexbox でこのようなレイアウトを再現しようとすると、html の構造上の制約を受けてレスポンシブ表示がやりづらくなってしまいます。

<div>
  <div>
    <div>A</div>
    <div>C</div>
  </div>
  <div>B</div>
</div>

逆に、Flexbox が適しているのはアイテムの大きさが不定・可変な場合です。Grid ではコンテナ側からの決め打ちになってしまうので、アイテムの大きさを柔軟に指定しきれません。

<div>
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
  ...
</div>

まとめ

Grid は、縦方向も含めた、2次元的な配置をしたい時
Flexbox は、シンプルに1方向に、1次元的な配置をしたい時

に便利です。

ただ、IE対応が必要でアイテムの数が不定の時は、技術的な理由から Flexbox 使った方がいいです。