CSS GridとFlexboxの使い分け決定版

一言で言うと

	Flexbox	CSS Grid
向いている方向	1方向（行 or 列）	2方向（行 × 列）
レイアウトの起点	コンテンツが決める	コンテナが決める
典型的な用途	ナビゲーション・カード行・ボタン群	ページレイアウト・グリッドギャラリー

Flexbox が向いているケース

ナビゲーションバー

nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: space-between;
}

カードを横並びにする

.card-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.card {
  flex: 1 1 200px; /* 最小200px、余白を均等に埋める */
}

垂直中央揃え（最もよく使う）

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

CSS Grid が向いているケース

ページ全体のレイアウト

.layout {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

header { grid-area: header; }
aside  { grid-area: sidebar; }
main   { grid-area: main; }
footer { grid-area: footer; }

均等グリッドギャラリー

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

auto-fill + minmax の組み合わせで、コンテナ幅に応じてカラム数が自動調整されます。メディアクエリ不要。

アイテムが特定のセルをまたぐ

.featured {
  grid-column: 1 / 3; /* 1列目〜3列目にまたがる */
  grid-row: 1 / 2;
}

組み合わせて使う

GridとFlexboxは競合しません。グリッドでページ骨格を決め、各セル内はFlexboxで細かく整理するのが実践的です。

/* Grid でマクロレイアウト */
.page {
  display: grid;
  grid-template-columns: 1fr 3fr;
}

/* Flex でミクロレイアウト（カード内） */
.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

よくある迷いポイント

Q: カードリストはどっち？

A: 両方あり。

行内でのサイズ制御が重要 → flex: 1 1 200px（Flex）
厳密に列数と行数を揃えたい → grid-template-columns: repeat(3, 1fr)（Grid）

Q: 縦横中央揃えは？

どちらでも可能ですが、Flexbox の方がシンプルです：

/* Flex */
display: flex; align-items: center; justify-content: center;

/* Grid */
display: grid; place-items: center;

まとめ

コンテンツの流れに沿って並べる → Flexbox
空間を先に区切ってコンテンツを置く → Grid
両方組み合わせるのが現代の実践的アプローチ

参考: MDN - Flexbox / MDN - Grid

S	公式ソース確認済み
A	成功実績多数・失敗例少数
B	賛否両論
C	動作未確認・セキュリティリスク高
Z	個人所感