概要
現代のフロントエンドにおけるレイアウト設計は、Flexbox と CSS Grid の2大巨頭によって支えられている。
どちらも強力で柔軟、そして一見似たような構文と効果を持つ。
しかし、適材適所を誤れば、柔軟さは崩壊に変わる。
無意識に使い分けているうちは、設計は安定しない。
どのような場面でどちらを選ぶべきか？
それを言語化し、意図して選び取るための指針をこの記事で提供する。
対象環境
CSS3以降対応の主要ブラウザ（Chrome / Firefox / Safari / Edge）
モバイル・PCどちらも対応
それぞれの定義と役割
Flexbox：一軸方向の並びに最適化されたレイアウトモデル
- 主軸（row / column）に対して子要素を並べる
- 子要素の間隔・整列・縮小・成長を制御
- コンテンツ駆動（内容の大きさに応じて形が決まる）
CSS Grid：二軸方向を完全に制御できるグリッドシステム
- 縦横（行列）を同時に制御可能
- 要素を明示的に配置することができる（row / column のマッピング）
- レイアウト駆動（構造が先にあり、内容がそこに入る）
判断基準（5つの指針）
| 判断軸 | Flexbox | CSS Grid |
|---|---|---|
| 並びの方向が一方向か？ | ✅ 適している | ❌ オーバースペック |
| アイテムのサイズが可変か？ | ✅ 向いている | △ 明示的な設計が必要 |
| レイアウトが複雑か？ | ❌ 管理が困難 | ✅ 行列で柔軟にコントロール可能 |
| レスポンシブ性を重視するか？ | ✅ wrap や grow で柔軟に対応可能 | ✅ メディアクエリ連動も容易 |
| 要素の位置を制御したいか？ | ❌ 難しい | ✅ grid-area, row, column で指定可 |
実例で比較
Flexbox：ボタンを横並びにし、端で均等に配置
<div class="flex-container">
<button>Yes</button>
<button>No</button>
</div>
.flex-container {
display: flex;
justify-content: space-between;
}
→ 一方向での並びに非常に強い。
Grid：2列×2行で完全に制御されたカード配置
<div class="grid-container">
<div class="card">A</div>
<div class="card">B</div>
<div class="card">C</div>
<div class="card">D</div>
</div>
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto auto;
gap: 1em;
}
→ 縦横の制御が完璧。メディアクエリとも相性が良い。
よくある混乱とその処方箋
「Flexboxで頑張りすぎる」問題
display: flex;
flex-wrap: wrap;
width: calc(50% - 10px);
→ 無理にグリッドっぽく並べようとして、計算地獄と崩れの温床に。
→ ✅ 明らかにグリッドパターンなら素直に display: grid を使うべき。
「Gridの設計が重すぎる」問題
grid-template-columns: repeat(12, 1fr);
→ 内容が単純なのに、フレームワークのノリで過剰な構造を持ち込むケース。
→ ✅ 一方向で済むなら、柔軟性の高いFlexboxで十分。
併用という選択肢
- 親要素に
display: grid - 子要素内部の整列に
display: flex
例：
.grid-item {
display: flex;
flex-direction: column;
justify-content: center;
}
→ レイアウト：Grid / コンテンツ内整列：Flex のハイブリッド設計が王道
結語
FlexboxとCSS Grid。
どちらも強力なレイアウトツールだが、用途を見極めることで真価を発揮する。
- Flexboxは「並べる」ためにある
- Gridは「配置する」ためにある
この一言に尽きる。
見た目を揃えるのではなく、設計思想で選ぶこと。
それがプロフェッショナルのCSS設計だ。