CSSでレイアウトを組むとき、まず悩むのが「GridとFlexbox、どっちを使うべき？」という問題です。どちらも強力なレイアウト技術ですが、仕組みや得意なことは大きく異なります。
この記事では、グリッドとフレックスの違いと、シーン別の使い分けポイントを、図とコード例でわかりやすく解説します。
初学者の方はもちろん、実装時に迷いがちな中級者にもおすすめの内容です！
目次
CSS GridとFlexboxの基本的な違い
まずは両者の根本的な仕組みの違いを理解しておきましょう。
✔ Flexboxとは？
- 要素を横一列（row）または縦一列（column）に並べるのに特化したレイアウト
- 要素間の関係性を元に自動配置される
- ナビゲーションバー、ボタンの横並びなど「一方向の整列」に向いている
✔ Gridとは？
- 親要素に「行（row）× 列（column）」の格子状レイアウトを作る
- 子要素をそのグリッド内に明示的に配置
- ブログ一覧やギャラリーなど「2軸で複雑に配置」するレイアウトに向いている
比較表
| 特徴 | Flexbox | Grid |
|---|---|---|
| 軸 | 単一軸（横 or 縦） | 2軸（横 + 縦） |
| 配置方法 | 子要素間の関係で自動調整 | 親要素で枠組みを定義し、子を配置 |
| 得意なレイアウト | ナビバー、ボタン横並び、スライダー | カード一覧、2Dテーブル、複雑なページ構成 |
| 習得難易度 | やや簡単 | やや難しい（慣れれば便利） |
レイアウトパターン別の使い分け例
ここでは、よくあるUIレイアウトの場合どちらを使うべきかを解説します。
① ナビゲーションバー → Flexbox向き
[ Home ] [ About ] [ Blog ] [ Contact ]横方向に均等に並べたい → display: flex; justify-content: space-between;
② ブログ一覧（カード3列×2行）→ Grid向き
[□] [□] [□]
[□] [□] [□]行と列で構成されるレイアウト → display: grid; grid-template-columns: repeat(3, 1fr);
③ フォーム（ラベル＋入力欄）→ GridもしくはFlex
[名前 ] [___________]
[メール ] [___________]ラベルと入力欄を横並び＆縦整列 → Gridの「セル分け」が便利
④ スライダーの中身 → Flexbox向き
[ □ ][ □ ][ □ ][ □ ] → 横スクロールdisplay: flex; overflow-x: scroll; で実装が簡単
同じレイアウトをFlexとGridで実装してみた
例：3つのカードを横並びに配置
Flexbox
.container {
display: flex;
gap: 20px;
}
.card {
flex: 1;
}Grid
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.card {
/* 特に指定不要 */
}違いのポイント
- Flexbox： 子要素の幅に柔軟。レイアウトは子に依存する。
- Grid： 親でカラム数を決めるので、設計通りにレイアウトされやすい。
結局どう使い分けるべき？
Flexboxがおすすめなケース
- 横または縦方向だけで揃える
- 要素数が変動するリスト（スライダー、ナビゲーションなど）
- 単純な1列／1行構成
Gridがおすすめなケース
- 2軸での位置指定が必要（行＋列）
- 複数の行・列がある一覧表示（ギャラリー、ブログカードなど）
- 明確なグリッド設計で、レイアウトを固定したいとき
まとめ：GridとFlexを“適材適所”で使いこなそう！
| 状況 | 使うべきレイアウト |
|---|---|
| 横並びしたい・1列で十分 | Flexbox |
| 行と列で区切って配置したい | Grid |
| 親要素でレイアウトを定義したい | Grid |
| 子要素の内容に合わせて調整したい | Flexbox |
迷ったらまずはFlexboxで組んでみて、調整が複雑ならGridに切り替えるという流れでもOKです。
どちらも非常に強力なCSSモジュールなので、場面に応じて柔軟に使い分けていきましょう！
補足：GridとFlexを組み合わせて使う例も！
- ページ全体の枠組み：Grid
- 各ブロック内の並び：Flexbox
というように「親はGrid・子はFlex」という構成は非常に実用的です。
おわりに
CSSレイアウトの設計は、正解が1つではありません。
大切なのは、「今このレイアウトで求められていること」に応じて適したツールを選ぶこと。
本記事が、あなたのレイアウト設計を少しでも助ける参考になれば幸いです！
