目次
- FlexboxとGridの違いは？まず一文で
- なぜ混乱しやすいのか
- Flexboxとは？（1次元レイアウト）
- 得意なこと
- Gridとは？（2次元レイアウト）
- 得意なこと
- 最大の違い：1次元と2次元
- 実際のコード比較（同じレイアウト）
- 3カラムカードを作る場合
- Flexbox
- Grid
- よくある失敗：Flexで無理やり全体レイアウトを作る
- スマホ崩れが起きる理由
- 対策（Flex）
- 対策（Grid）
- DevToolsで違いを確認する方法
- どちらを使うべきか判断フロー
- 横か縦に並べるだけ？
- 行と列を同時に制御したい？
- ページ全体の骨組み？
- ボタンやナビなど部品単位？
- 実務での王道パターン
- よくある誤解
- 「Gridの方が新しいから上位互換？」
- 「Flexを覚えれば十分？」
- 横スクロール問題を防ぐ設計視点
- チェックリスト
- まとめ：FlexboxとGridは役割分担
FlexboxとGridの違いは？まず一文で
Flexboxは「1方向に並べる」のが得意、Gridは「縦横まとめて配置する」のが得意。
この違いを理解すれば、レイアウト選びで迷いません。
でも実際に触ると、
- どっちを使えばいいの？
- 両方必要？
- スマホで崩れるのはなぜ？
と疑問が出ますよね。
ここから実務目線で整理します。
なぜ混乱しやすいのか
どちらも display を変えるだけ。
.container {
display: flex;
}.container {
display: grid;
}見た目は似ています。
でも、考え方が根本的に違います。
Flexboxとは？（1次元レイアウト）
Flexboxは横か縦、どちらか一方向の並びを制御する仕組みです。
.container {
display: flex;
justify-content: space-between;
align-items: center;
}得意なこと
- ナビメニュー
- ボタンの横並び
- 縦中央揃え
- 要素間の余白調整
「どう並べるか」に強い。
Gridとは？（2次元レイアウト）
Gridは行と列を同時に設計できるレイアウトです。
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}得意なこと
- 2カラム・3カラム構成
- カードレイアウト
- ページ全体の骨組み
- 高さを揃える配置
「どこに置くか」に強い。
最大の違い：1次元と2次元
| 項目 | Flexbox | Grid |
|---|---|---|
| 方向 | 横 or 縦 | 縦 + 横 |
| 思考 | 並び | 配置 |
| 向いている規模 | 部品単位 | 全体設計 |
Flexは「列車の車両を並べる」イメージ。
Gridは「マス目に配置する」イメージ。
実際のコード比較（同じレイアウト）
3カラムカードを作る場合
Flexbox
.container {
display: flex;
gap: 20px;
}
.card {
flex: 1;
}問題点：
- 折り返し対応で工夫が必要
- 高さ揃えが状況次第
Grid
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}構造を先に定義できる。
見通しが良い。
よくある失敗：Flexで無理やり全体レイアウトを作る
昔、私はトップページ全体をFlexだけで組みました。
結果、
- スマホで横スクロール発生
- カラム高さがバラバラ
- メディアクエリ地獄
Gridを使えば一発で解決する部分でした。
スマホ崩れが起きる理由
Flexboxで横並びにしたまま、
.container {
display: flex;
}これをそのままにすると、
狭い画面で横スクロールが出ます。
対策（Flex）
.container {
display: flex;
flex-wrap: wrap;
}対策（Grid）
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}Gridはレスポンシブ対応がシンプル。
DevToolsで違いを確認する方法
- 右クリック → 検証
- Elementsタブで.containerを選択
- LayoutタブでFlex / Gridの可視化を見る
Chromeでは、
Gridはマス目表示されます。
視覚的に違いが分かります。
どちらを使うべきか判断フロー
横か縦に並べるだけ？
→ Flexbox
行と列を同時に制御したい？
→ Grid
ページ全体の骨組み？
→ Grid
ボタンやナビなど部品単位？
→ Flexbox
実務での王道パターン
実際はこう使います。
- ページ全体 → Grid
- ヘッダーナビ → Flex
- カード内部 → Flex
組み合わせます。
どちらか一方だけではありません。
よくある誤解
「Gridの方が新しいから上位互換？」
違います。
用途が違うだけです。
「Flexを覚えれば十分？」
部品だけならOK。
全体設計では限界が出ます。
横スクロール問題を防ぐ設計視点
Flexで横並びを固定幅で作ると、
.card {
width: 300px;
}画面幅が狭いと溢れます。
Gridなら、
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));自然に縮みます。
ここが大きな差です。
チェックリスト
✔ 1方向の並びだけか？
✔ 行と列を同時に考える必要があるか？
✔ スマホ幅で崩れないか？
✔ 横スクロールが出ていないか？
✔ DevToolsでレイアウト確認したか？
まとめ：FlexboxとGridは役割分担
- Flexbox → 並べる達人
- Grid → 配置の設計者
違いを理解すれば、
- コードがシンプルになる
- レイアウトで悩まなくなる
- スマホ崩れが減る
迷ったら「方向の数」を考えてください。
それだけで、判断はほぼ決まります。