CSS Grid vs Flexbox：2026年のWebレイアウト完全ガイド
CSS Grid vs Flexbox：2026年のWebレイアウト完全ガイド
CSS GridとFlexboxの使い分けは？違い、用途、効果的な組み合わせ方を実践コード例で解説。
2026年3月17日4分で読了
CSS GridとFlexboxを完全に使いこなす
「GridとFlexbox、どっちを使えばいいの？」これはフロントエンド開発者なら誰もが抱く疑問です。2026年現在、両方とも全ブラウザで完全サポートされており、モダンCSSレイアウトの主役として活躍しています。
結論から言えば、どちらかを選ぶのではなく、両方を使い分けることが正解です。それぞれが得意とする場面が異なるからです。
根本的な違い：1次元 vs 2次元
Flexbox：1次元レイアウト
Flexboxは**1方向（横または縦）**の並べ方を制御します。
.container {
display: flex;
flex-direction: row; /* または column */
justify-content: space-between;
align-items: center;
}
ナビゲーションバー、ボタングループ、カードの並列表示など、一列に要素を並べる場合に最適です。
CSS Grid：2次元レイアウト
CSS Gridは行と列の両方を同時に制御します。
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
gap: 1rem;
}
ダッシュボード、ギャラリー、複雑なページレイアウトなど、縦横の両方向に要素を配置する場合に最適です。
Flexboxの実践例
ナビゲーションバー
<nav class="navbar">
<div class="logo">ToolBox Hub</div>
<ul class="nav-links">
<li><a href="/tools">ツール</a></li>
<li><a href="/blog">ブログ</a></li>
<li><a href="/docs">ドキュメント</a></li>
</ul>
<button class="cta-button">無料で始める</button>
</nav>
.navbar {
display: flex;
justify-content: space-between; /* ロゴ・リンク・ボタンを均等配置 */
align-items: center; /* 縦方向の中央揃え */
padding: 1rem 2rem;
background: #1a1a2e;
}
.nav-links {
display: flex;
gap: 2rem;
list-style: none;
margin: 0;
padding: 0;
}
.cta-button {
background: #6c63ff;
color: white;
padding: 0.5rem 1.5rem;
border-radius: 8px;
border: none;
cursor: pointer;
}
カードのレイアウト
/* ツールカードを横並びに表示 */
.tool-list {
display: flex;
flex-wrap: wrap; /* 画面幅に合わせて折り返す */
gap: 1.5rem;
}
.tool-card {
flex: 1 1 280px; /* 最小幅280px、均等に伸縮 */
padding: 1.5rem;
border-radius: 12px;
background: white;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
センタリング（最もよく使う用途の一つ）
/* 要素を完全に中央揃えにする */
.hero-section {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
text-align: center;
}
/* アイコンとテキストを横並びに */
.feature-item {
display: flex;
align-items: center;
gap: 0.75rem;
}
CSS Gridの実践例
ダッシュボードレイアウト
<div class="dashboard">
<header class="header">ヘッダー</header>
<nav class="sidebar">サイドバー</nav>
<main class="main-content">メインコンテンツ</main>
<aside class="widgets">ウィジェット</aside>
<footer class="footer">フッター</footer>
</div>
.dashboard {
display: grid;
grid-template-areas:
"header header header"
"sidebar main widgets"
"footer footer footer";
grid-template-columns: 240px 1fr 300px;
grid-template-rows: 60px 1fr 60px;
min-height: 100vh;
gap: 1rem;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main-content { grid-area: main; }
.widgets { grid-area: widgets; }
.footer { grid-area: footer; }
写真ギャラリー
/* レスポンシブな写真ギャラリー */
.gallery {
display: grid;
/* 最小200px、利用可能スペースを自動で埋める */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 1rem;
}
.gallery-item {
aspect-ratio: 1; /* 正方形を保持 */
overflow: hidden;
border-radius: 8px;
}
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.gallery-item:hover img {
transform: scale(1.05);
}
記事レイアウト（Holy Grail）
/* 古典的なHoly Grailレイアウト */
.page-layout {
display: grid;
grid-template-columns: 200px 1fr 200px;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}
/* スパンで複数セルを占有 */
.full-width {
grid-column: 1 / -1; /* 全列にまたがる */
}
GridとFlexboxの使い分け表
| 場面 | 推奨 | 理由 |
|---|---|---|
| ナビゲーションバー | Flexbox | 一列の要素を並べるだけ |
| ページ全体のレイアウト | Grid | ヘッダー・サイドバー・フッターの2D配置 |
| ボタングループ | Flexbox | 横一列のシンプルな並び |
| カードグリッド | Grid | 整列した行と列が必要 |
| センタリング | Flexbox | シンプルで直感的 |
| フォームレイアウト | Grid | ラベルと入力フィールドの整列 |
| ヒーローセクション | Flexbox | コンテンツの縦横中央揃え |
| ダッシュボード | Grid | 複雑な2Dレイアウト |
| チャットUI | Flexbox | メッセージを縦方向に並べる |
| 写真ギャラリー | Grid | 均等なグリッド表示 |
両方を組み合わせる
実際のプロジェクトでは、GridとFlexboxを組み合わせて使います。
/* Gridでページ全体の構造を作り... */
.app {
display: grid;
grid-template-columns: 260px 1fr;
grid-template-rows: 64px 1fr;
height: 100vh;
}
/* 各セクション内でFlexboxを使う */
.header {
grid-column: 1 / -1;
display: flex; /* ← Flexboxで内部要素を配置 */
align-items: center;
justify-content: space-between;
padding: 0 2rem;
border-bottom: 1px solid #e5e7eb;
}
.sidebar {
display: flex;
flex-direction: column; /* ← メニュー項目を縦並びに */
padding: 1rem;
border-right: 1px solid #e5e7eb;
}
/* カードグリッドは再びGridで */
.cards-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.5rem;
padding: 2rem;
align-content: start;
}
レスポンシブデザインパターン
Grid でのレスポンシブ対応
/* モバイルファースト */
.features-grid {
display: grid;
grid-template-columns: 1fr; /* スマホ：1列 */
gap: 1.5rem;
}
@media (min-width: 768px) {
.features-grid {
grid-template-columns: repeat(2, 1fr); /* タブレット：2列 */
}
}
@media (min-width: 1024px) {
.features-grid {
grid-template-columns: repeat(3, 1fr); /* デスクトップ：3列 */
}
}
/* auto-fill を使えばメディアクエリなしでレスポンシブに */
.auto-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
gap: 1.5rem;
}
Flexbox でのレスポンシブ対応
.card-list {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
}
.card {
/* モバイルは100%幅、それ以上では均等に */
flex: 1 1 min(100%, 280px);
}
よくある間違いと解決法
Gridの高さが揃わない
/* NG: カードの高さがバラバラになる */
.card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
/* OK: align-items で制御 */
.card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: start; /* または stretch（デフォルト） */
}
Flexboxで最後の行が左揃えにならない
/* NG: flex-wrap使用時に最後の行が中央/均等になってしまう */
.items {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
/* OK: Gridのauto-fillを使う（より簡単な解決策） */
.items {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 1rem;
}
まとめ
GridとFlexboxは競合ツールではなく、相互補完的なツールです。
- Flexbox: 一次元（行または列）の並び。ナビ、ボタン、センタリングに◎
- Grid: 二次元（行と列）の配置。ページレイアウト、ダッシュボード、ギャラリーに◎
- 組み合わせ: Gridで骨格を作り、Flexboxで細部を整える
「どちらを使うか」を考えるのではなく、「この要素は1方向に並べるのか、それとも縦横両方に配置するのか」を考えると、自然と正しい選択ができるようになります。両方を実際にコーディングして使ってみることが、マスターへの一番の近道です。