Flexbox と Grid の違い（使い分け）

TL;DR — ひとことで言うと

1方向の並び（ナビ、ボタン列、中央寄せ）はflex、行と列を同時に制御するレイアウト（カード一覧、ページ骨格）はgrid。「デザインが表・格子に見えるならgrid」が目安です。

比較表

観点	Flexbox	Grid
次元	1次元（行または列の流れ）	2次元（行と列を同時に定義）
サイズの主導権	コンテンツ主導（中身に応じて伸縮）	レイアウト主導（先にトラックを定義して流し込む）
典型用途	ヘッダー内の横並び、ボタングループ、中央寄せ	カードグリッド、ページ全体の骨格、フォームの整列
子孫の整列	入れ子のflexが増えがち	grid-template-areasやsubgridで深い整列も1つで管理
gap	対応（全ブラウザ）	対応

迷ったら「行と列の両方を揃えたいか」で判断します。両方ならgrid、片方ならflex。flexの入れ子が3段以上になったら、gridで書き直せないか疑うのが良いサインです。両者は排他ではなく、grid骨格の中の部品にflexを使うのが実務の標準形です。

AIはgridで一発のレイアウトをflexの入れ子で組みがちです。「gridで書き直せないか」を一度聞くだけでコードが大幅に簡潔になることがあります。