FlexboxとCSS Grid完全ガイド｜レイアウト手法の違いと実践的な使い分け

FlexboxとGridの最重要概念

CSSのレイアウトを学ぶ際、FlexboxとGridのどちらを使えばいいか迷う方は多いと思います。判断基準はシンプルです。

• Flexbox = 一方向（横一列 or 縦一列に並べるとき）
• Grid = 二次元（行と列の両方を同時にコントロールするとき）

ナビゲーションバーのようなアイテムを一列に並べる場面ではFlexbox、カード一覧のような格子状のレイアウトではGridを使うのが適切です。ただし両者は排他的ではなく、Gridの中のアイテムをFlexboxで整えるなど、組み合わせて使うのが実践的なアプローチです。

---

Flexboxの基本

コンテナとアイテム

Flexboxはコンテナ（親要素）に display: flex を指定するだけで有効になります。直接の子要素が自動的にフレックスアイテムになります。

.container {
  display: flex;
}

<div class="container">
  <div>アイテム1</div>
  <div>アイテム2</div>
  <div>アイテム3</div>
</div>

デフォルトでは左から右へ横一列に並びます。

主要プロパティ一覧

プロパティ	説明	主な値
flex-direction	並ぶ方向	row（横）/ column（縦）
justify-content	主軸方向の揃え	flex-start / center / flex-end / space-between / space-around
align-items	交差軸方向の揃え	stretch / center / flex-start / flex-end
flex-wrap	折り返しの有無	nowrap / wrap
gap	アイテム間の余白	16px など

実践例：ナビゲーションバー

.navbar {
  display: flex;
  justify-content: space-between; /* ロゴと右側メニューを両端に */
  align-items: center;            /* 縦方向に中央揃え */
  padding: 0 24px;
  height: 64px;
  background-color: #1a1a2e;
}

.nav-links {
  display: flex;
  gap: 32px;                      /* リンク間のスペース */
  list-style: none;
}

<nav class="navbar">
  <a class="logo" href="/">MyBlog</a>
  <ul class="nav-links">
    <li><a href="/about">About</a></li>
    <li><a href="/blog">Blog</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

flex プロパティで伸縮を制御

アイテム側に flex プロパティを指定すると、余った空間をどう使うか制御できます。

.sidebar {
  flex: 0 0 260px;  /* 固定幅260px（伸縮しない） */
}

.main-content {
  flex: 1;          /* 残りのスペースをすべて使う */
}

/* 2カラムレイアウト */
.layout {
  display: flex;
  gap: 24px;
}

---

CSS Gridの基本

グリッドコンテナの作り方

display: grid を指定し、grid-template-columns で列の構成を定義します。

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 均等な3列 */
  gap: 24px;
}

fr（fraction）は利用可能なスペースの割合を表す単位です。1fr 1fr 1fr は3等分を意味します。

repeat() と minmax() で柔軟に

/* repeat(3, 1fr) は 1fr 1fr 1fr と同じ */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* 自動で列数を決める（レスポンシブに対応） */
.auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

auto-fill と minmax(280px, 1fr) の組み合わせは非常に強力です。コンテナの幅に応じて列数が自動調整され、各列は最小280px・最大1frになります。メディアクエリを書かずにレスポンシブなカードレイアウトが実現できます。

grid-area でアイテムの配置を制御

.dashboard {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 64px 1fr 48px;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
  min-height: 100vh;
}

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

<div class="dashboard">
  <header class="header">ヘッダー</header>
  <aside class="sidebar">サイドバー</aside>
  <main class="main">メインコンテンツ</main>
  <footer class="footer">フッター</footer>
</div>

---

実践パターン集

パターン1：カード一覧（Grid推奨）

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

.card {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 20px;
  display: flex;             /* カード内部はFlexbox */
  flex-direction: column;
  gap: 12px;
}

.card-footer {
  margin-top: auto;          /* フッターをカード下部に固定 */
}

パターン2：フォームのラベルと入力欄（Grid推奨）

.form {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 12px 16px;
  align-items: center;
}

/* ボタンは2列にまたがる */
.form-submit {
  grid-column: 1 / -1;
  justify-self: end;
}

<form class="form">
  <label for="name">名前</label>
  <input id="name" type="text" />

  <label for="email">メール</label>
  <input id="email" type="email" />

  <button type="submit" class="form-submit">送信</button>
</form>

パターン3：水平・垂直中央揃え（Flexbox推奨）

.center-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

要素を完全に中央に配置する最もシンプルな方法です。ローディングスピナーやモーダルの配置に活用できます。

---

FlexboxとGridの使い分けまとめ

ユースケース	推奨
ナビゲーションバー	Flexbox
ボタングループ	Flexbox
カード一覧	Grid
ダッシュボードレイアウト	Grid
フォームの入力欄整列	Grid
アイテムの垂直中央揃え	Flexbox
複雑なページ全体のレイアウト	Grid

---

参考書籍

---

まとめ

FlexboxとGridは用途が異なる2つのレイアウトシステムです。「一列に並べるならFlex、格子状に並べるならGrid」を基本に選択し、必要に応じて組み合わせましょう。実際のUI実装では、ページ全体のレイアウトにGridを使い、その中の個々のコンポーネントの整列にFlexboxを使うパターンが最もよく使われます。