CSS FlexboxとGridを使い分ける完全ガイド｜実案件で役立つレイアウト実装の基本

「Flexboxで組むべきか、Gridで組むべきか」——CSS を学び始めた方なら一度は感じたことのある迷いではないでしょうか。どちらも強力なレイアウト手法ですが、それぞれ得意な場面が異なります。この記事では、初心者でも理解しやすいようにFlexboxとGridの基本から使い分けの判断基準、コピペで使えるコード例まで丁寧に解説します。Web制作の現場で「なんとなく」ではなく「意図をもって」レイアウトを組む力が身につきます。

---

CSS FlexboxとGridの基本的な違いとは

まずはFlexboxとGridそれぞれの概念を整理しましょう。どちらもCSSでレイアウトを組む仕組みですが、Flexboxは「1次元（横か縦のどちらか一方向）」のレイアウト、Gridは「2次元（横と縦を同時に）」のレイアウトを得意とするという大原則があります。

Flexboxとは

Flexbox（フレックスボックス）は、display: flex を親要素に指定するだけで子要素を柔軟に並べられるレイアウトモデルです。横並びのナビゲーションメニューやカードを一列に並べる場面など、一方向に要素を整列・伸縮させたいときに非常に強力です。アイテムの間隔調整や中央寄せも数プロパティで実現でき、コード量が少なく済むのが魅力です。

• 得意なこと：ナビゲーションバー、ボタン群の横並び、カードの1行レイアウト、垂直中央寄せ
• 代表プロパティ：flex-direction、justify-content、align-items、flex-wrap
• 軸の概念：主軸（main axis）と交差軸（cross axis）の2軸で考える

Gridとは

CSS Grid（グリッド）は、display: grid を親要素に指定し、行（row）と列（column）の両方を同時に定義できるレイアウトモデルです。ページ全体のマクロなレイアウト（ヘッダー・サイドバー・フッターの配置など）や、カード一覧のような格子状デザインに特に威力を発揮します。

• 得意なこと：ページ全体の骨格設計、カードグリッド、複雑なマガジンレイアウト
• 代表プロパティ：grid-template-columns、grid-template-rows、gap、grid-area
• 軸の概念：行と列を同時に指定する「2次元」の考え方

---

FlexboxとGridの使い分け判断基準

「どちらを使うか迷ったら、まずレイアウトが1次元か2次元かを問う」——これが最も実践的な判断軸です。以下の比較表を参考にしてください。

判断基準	Flexbox	Grid
レイアウトの次元	1次元（行 or 列）	2次元（行 と 列）
主な用途	部品レベルのUI配置	ページ・セクション全体の構造
コンテンツ量が可変	◎ 得意	△ 固定寄り
格子状レイアウト	△ 工夫が必要	◎ 得意
要素の重ね合わせ	△ 難しい	◎ grid-areaで可能
学習コスト	低め	やや高め

もう少し具体的なシーンで整理すると次のようになります。

• ナビゲーションメニューを横並びにする：→ Flexbox
• ページ全体のヘッダー・メイン・サイドバー・フッターを組む：→ Grid
• ボタンを縦横中央に配置する：→ Flexbox
• 商品カードを3列で均等に並べる：→ Grid
• アイコン＋テキストを横並びにする：→ Flexbox
• マガジン風の複雑なカラム割りを作る：→ Grid

「部品（コンポーネント）レベルはFlex、ページ・セクションレベルはGrid」と覚えておくと実務でほぼ迷いません。

---

Flexboxの基本プロパティと実装コード例

ここからは実際のコードを使って解説します。まずはFlexboxの頻出プロパティを押さえましょう。

基本的な横並びレイアウト（ナビゲーション）

以下はナビゲーションメニューを横並びかつ均等に配置するコードです。

/* HTML */
<nav class="nav">
  <a href="#">ホーム</a>
  <a href="#">サービス</a>
  <a href="#">料金</a>
  <a href="#">お問い合わせ</a>
</nav>

/* CSS */
.nav {
  display: flex;
  justify-content: space-between; /* 均等配置 */
  align-items: center;            /* 縦方向中央 */
  gap: 16px;
}

justify-content は主軸方向（デフォルトは横）の揃え方を、align-items は交差軸方向（デフォルトは縦）の揃え方を制御します。この2つのプロパティを組み合わせるだけで、縦横中央寄せが簡単に実現できます。

よく使うjustify-contentの値一覧

• flex-start：主軸の始点に寄せる（デフォルト）
• flex-end：主軸の終点に寄せる
• center：主軸の中央に寄せる
• space-between：両端を固定して均等間隔
• space-around：各要素の左右に均等な余白
• space-evenly：すべての間隔を完全均等に

折り返しレイアウト（flex-wrap）

カードが画面幅に収まらないとき、flex-wrap: wrap を指定すると自動的に折り返してくれます。レスポンシブデザインで非常によく使うパターンです。

.card-list {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.card {
  flex: 1 1 280px; /* 最小幅280px、伸縮可能 */
}

flex: 1 1 280px は「伸びる・縮む・ベースサイズ280px」を一括指定するショートハンドです。このパターンはレスポンシブカードレイアウトの定番として覚えておきましょう。

---

Gridの基本プロパティと実装コード例

続いてGridの基本を実装レベルで解説します。初めて触る方でも理解できるよう、シンプルなコードから始めます。

3カラムのカードグリッドを作る

/* HTML */
<div class="grid">
  <div class="card">カード1</div>
  <div class="card">カード2</div>
  <div class="card">カード3</div>
  <div class="card">カード4</div>
  <div class="card">カード5</div>
  <div class="card">カード6</div>
</div>

/* CSS */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3等分 */
  gap: 24px;
}

repeat(3, 1fr) は「3列を均等に（利用可能なスペースを3等分）配置する」という意味です。1fr（fraction）はGridならではの単位で、残りのスペースを比率で分配してくれる非常に便利な単位です。

レスポンシブ対応：auto-fill＋minmaxの活用

メディアクエリなしでレスポンシブ対応できるのがGridの強みの一つです。

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

auto-fill はコンテナ幅に応じて列数を自動調整します。minmax(280px, 1fr) は「最低280px、最大で1fr」を意味し、画面幅が広ければ3列・4列に、狭ければ1列・2列に自動で変化します。メディアクエリを書かずにレスポンシブが完成するため、実務で頻繁に使われるテクニックです。

ページ全体の骨格レイアウトをGridで組む

ヘッダー・メインコンテンツ・サイドバー・フッターという典型的なWebサイト構造もGridで簡潔に書けます。

/* HTML */
<div class="page-layout">
  <header class="header">ヘッダー</header>
  <main class="main">メイン</main>
  <aside class="sidebar">サイドバー</aside>
  <footer class="footer">フッター</footer>
</div>

/* CSS */
.page-layout {
  display: grid;
  grid-template-areas:
    "header  header"
    "main    sidebar"
    "footer  footer";
  grid-template-columns: 1fr 300px;
  gap: 24px;
}

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

grid-template-areas はレイアウトを文字で「絵として」定義できるプロパティです。コードを見るだけで完成形のレイアウトがイメージできるため、チーム開発での可読性が高く、実務でも積極的に採用されています。

---

FlexboxとGridを組み合わせる実践パターン

実際のWeb制作現場では、FlexboxとGridを「組み合わせて」使うことがほとんどです。「Gridでページ全体の骨格を作り、各セクション内ではFlexboxで部品を整える」という役割分担が最もよく見られる構成です。

実践例：ブログ記事一覧ページ

1. ページ全体のレイアウト（ヘッダー・記事一覧エリア・サイドバー・フッター）→ Grid で組む
2. 各記事カード内のサムネイル＋タイトル＋タグの配置 → Flexbox で組む
3. ヘッダー内のロゴ＋ナビゲーションの横並び → Flexbox で組む
4. 記事カードを複数列に並べるグリッド → Grid で組む

このように「大枠はGrid・細部はFlex」と役割を分けると、コードの意図が明確になりメンテナンスしやすい設計になります。

Flexboxで起きがちな失敗と対処法

初心者がFlexboxで詰まりやすいポイントも押さえておきましょう。

• 子要素の幅が意図せず伸びる：flex-shrink: 0 または flex: none を指定して伸縮を止める
• 改行したときに最後の行が左寄りにならない：最後に見えない ::after 要素をFlex itemとして追加する（または Gridに切り替える）
• 縦方向に均等分割できない：親要素に高さ（height または min-height）を指定する

Gridで起きがちな失敗と対処法

• 列の幅が意図せず崩れる：minmax(0, 1fr) を使うと内容によるオーバーフローを防げる
• アイテムの配置順が変わる：grid-auto-flow を確認する（デフォルトは row）
• grid-template-areasで空白セルを作りたい：スペースではなく .（ドット）を使う

---

レスポンシブデザインへの対応方法

FlexboxとGrid、それぞれのレスポンシブ対応の基本的なアプローチを整理します。

Flexboxのレスポンシブ対応

スマートフォン表示では縦並びに、デスクトップでは横並びにしたい場合は flex-direction をメディアクエリで切り替えるのが定番です。

.card-list {
  display: flex;
  flex-direction: column; /* スマホは縦並び */
  gap: 16px;
}

@media (min-width: 768px) {
  .card-list {
    flex-direction: row;  /* タブレット以上は横並び */
    flex-wrap: wrap;
  }
}

Gridのレスポンシブ対応

先ほど紹介した auto-fill + minmax のほか、メディアクエリで列数を変える方法も使われます。

.grid {
  display: grid;
  grid-template-columns: 1fr; /* スマホは1列 */
  gap: 24px;
}

@media (min-width: 600px) {
  .grid {
    grid-template-columns: repeat(2, 1fr); /* タブレットは2列 */
  }
}

@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(3, 1fr); /* PCは3列 */
  }
}

「モバイルファースト」の考え方でスマホ向けのスタイルを先に書き、メディアクエリで画面が広がるほどレイアウトを拡張していくアプローチが現在のWeb制作標準です。

---

初心者が今日から練習できる3つのレイアウト課題

知識をインプットしたら、手を動かすことが大切です。以下の3つの課題はどれも実務に直結する頻出パターンです。コードを書いて確認しながら進めてみてください。

1. Flexboxで横並びナビゲーションを作る：4〜5項目のナビをFlexboxで横並びにし、justify-content: space-between と align-items: center を使って整える。ホバー時のスタイル変化も加えると実践的です。
2. GridでLPのヒーローセクションを組む：左側にキャッチコピー＋ボタン、右側にイメージ画像の2カラムレイアウトをGridで実装する。スマホでは1カラムになるレスポンシブ対応まで含めて挑戦しましょう。
3. FlexboxとGridを組み合わせたカード一覧を作る：Gridでカードを3列に並べ、各カード内のアイコン＋テキストの配置をFlexboxで組む。実際の制作現場で最も使われる構成です。

これら3つの課題をこなすことで、FlexboxとGridの「どちらをいつ使うか」という判断が自然に身につきます。実際にブラウザで確認しながら、崩れた箇所を自分でデバッグする経験を積むことが上達の近道です。

---

まとめ

CSS FlexboxとGridはどちらが優れているということはなく、それぞれの得意領域を理解して使い分けることが重要です。「1次元ならFlex、2次元ならGrid」という基本原則を軸に、実際にコードを書いて手を動かすことで理解が深まります。迷ったときはこの記事に戻って判断基準を確認してみてください。

・ポイント1：FlexboxはナビやボタンなどUI部品の1次元レイアウトが得意、Gridはページ骨格や格子状レイアウトの2次元設計が得意
・ポイント2：実務では「大枠はGrid・細部はFlex」と役割分担して組み合わせるのがベストプラクティス
・ポイント3：レスポンシブ対応はモバイルファーストで設計し、GridのautoフィルやFlexのflex-wrapを活用すると効率よく実装できる

FlexboxとGridを正しく使い分けられるようになると、コーディング速度と品質が一気に上がります。WithCodeでは実案件レベルのカリキュラムで、こうしたCSSの実践スキルをしっかり身につけられます。

---

WithCodeを体験できる初級コース公開中！

WithCodeでは、Web制作の基礎から実務的な技術まで、実践的なスキルを段階的に学べます。

初級コース（¥49,800）が完全無料に！

• 期間：1週間
• 学習内容：ロードマップ/基礎知識/環境構築/HTML/CSS/LP・ポートフォリオ作成
  → 正しい学習方法で「確かな成長」を実感できるカリキュラム

副業・フリーランスが主流になっている今こそ、自らのスキルで稼げる人材を目指してみませんか？

未経験でも心配することはありません。まずは無料カウンセリングで、悩みや不安をお聞か