なんとなく使ってるCSS Grid、ちゃんと理解してますか？視覚的に学ぶGrid完全ガイド

なんとなく使ってるCSS Grid、ちゃんと理解してますか？

こんにちは、新人Webコーダーのsakuです。

「grid-template-columns: repeat(3, 1fr); ってコピペで使ってるけど、正直よくわかってない...」
「fr単位って何？autoとの違いは？」
「auto-fitとauto-fill、どっち使えばいいの？」

こんな悩み、ありませんか？

今回は、CSS Gridの仕組みを視覚的なデモと図解でゼロから徹底解説します。
この記事を読めば「なんとなく」が「ちゃんと理解して使える」に変わります！

---

🎯 まずはGridの威力を体感しよう

Gridを使うと、こんなレイアウトが簡単に実現できます：

<div class="grid-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

たったこれだけで、3カラムの均等グリッドが完成します！

---

📐 Gridの基本構造を図解で理解

Grid Container（親要素）とGrid Items（子要素）

┌─────────────────────────────────┐
│  Grid Container (display: grid) │
│                                 │
│  ┌─────┐ ┌─────┐ ┌─────┐      │
│  │Item1│ │Item2│ │Item3│      │
│  └─────┘ └─────┘ └─────┘      │
│                                 │
│  ┌─────┐ ┌─────┐ ┌─────┐      │
│  │Item4│ │Item5│ │Item6│      │
│  └─────┘ └─────┘ └─────┘      │
│                                 │
└─────────────────────────────────┘

• Grid Container: display: grid を指定した親要素
• Grid Items: その直下の子要素（自動的にGridアイテムになる）

---

🔢 グリッドラインの仕組み

Gridは「見えない線」で区切られています：

    1       2       3       4
    ↓       ↓       ↓       ↓
1 → ┌───────┬───────┬───────┐
    │       │       │       │
2 → ├───────┼───────┼───────┤
    │       │       │       │
3 → └───────┴───────┴───────┘

• 縦の線: Column Line（列線）
• 横の線: Row Line（行線）
• 番号は1から始まる（0ではない！）

この線を使って、後で要素を配置していきます。

---

💡 fr単位を完全理解

frとは？

fr = fraction（分数、比率）

利用可能なスペースを比率で分配する単位です。

実際に動くデモで確認

まずは視覚的にfr単位の挙動を確認してみましょう：

👆 画面幅を変えて、どの部分が伸縮するか確認してください！

---

視覚的に見るfrの挙動

パターン1: 1fr 1fr 1fr （均等3分割）

┌─────────┬─────────┬─────────┐
│   1fr   │   1fr   │   1fr   │
│ (33.3%) │ (33.3%) │ (33.3%) │
└─────────┴─────────┴─────────┘

パターン2: 1fr 2fr 1fr （中央が2倍）

┌─────┬─────────────┬─────┐
│ 1fr │     2fr     │ 1fr │
│(25%)│    (50%)    │(25%)│
└─────┴─────────────┴─────┘

パターン3: 200px 1fr 1fr （固定幅＋可変）

┌──200px──┬───────┬───────┐
│  固定   │  1fr  │  1fr  │
│         │ (可変)│ (可変)│
└─────────┴───────┴───────┘

👉 ポイント: frは固定幅を引いた残りのスペースを分配します。

---

🔄 autoとの違い

autoは「コンテンツに合わせる」

grid-template-columns: auto 1fr auto;

┌─コンテンツ幅─┬────────1fr────────┬─コンテンツ幅─┐
│   短い文字   │   残りを全部使う   │  長い文字列  │
└──────────────┴────────────────────┴──────────────┘

• auto: コンテンツの幅に自動調整
• 1fr: 余ったスペースを埋める

---

🎯 repeat() で簡潔に書く

基本形

/* これ */
grid-template-columns: 1fr 1fr 1fr 1fr;

/* ↓ こう書ける */
grid-template-columns: repeat(4, 1fr);

複雑なパターンも繰り返せる

/* 200px, 1fr のペアを3回繰り返す */
grid-template-columns: repeat(3, 200px 1fr);

/* 結果: 200px 1fr 200px 1fr 200px 1fr */

---

📏 gap の仕組み

gapは要素と要素の間にだけスペースを作ります。

外側には入らない！
┌─────────────────────────┐
│ ┌───┐ gap ┌───┐ gap ┌───┐
│ │ 1 │ 16px│ 2 │ 16px│ 3 │
│ └───┘     └───┘     └───┘
└─────────────────────────┘

縦横で別々に指定できる

gap: 16px 32px; /* 行間16px、列間32px */

/* または */
row-gap: 16px;
column-gap: 32px;

---

🗺️ grid-template-areas で名前付き配置

HTMLとCSSで視覚的に対応させられます！

実際に動くデモで確認

👆 2つのレイアウトパターンを確認できます！

---

HTML

<div class="layout">
  <header class="header">Header</header>
  <nav class="sidebar">Sidebar</nav>
  <main class="main">Main</main>
  <footer class="footer">Footer</footer>
</div>

CSS

.layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  gap: 16px;
  height: 100vh;
}

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

結果の視覚イメージ

┌─────────────────────────┐
│       header            │
├──────────┬──────────────┤
│ sidebar  │    main      │
│          │              │
├──────────┴──────────────┤
│       footer            │
└─────────────────────────┘

👉 超直感的！ レイアウトがコードから一目瞭然です。

---

🔢 数値で配置：grid-column / grid-row

グリッドラインの番号を使って、要素を配置できます。

.item {
  grid-column: 1 / 3; /* 1列目から3列目まで */
  grid-row: 1 / 2;    /* 1行目から2行目まで */
}

spanを使った書き方

.item {
  grid-column: 1 / span 2; /* 1列目から2列分 */
}

視覚的イメージ

    1   2   3   4
1 → ┌───────────┐ ← span 2
    │   Item    │
2 → └───────────┘

---

🤔 auto-fit vs auto-fill の違い

この2つ、混乱しがちですよね。実際に動くデモで違いを確認してみましょう。

実際に動くデモで確認

👆 画面幅を広げて、auto-fill（青）とauto-fit（ピンク）の違いを確認してください！

---

共通の基本構文

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

auto-fill: 空セルを作る

【幅広い画面の場合】
┌─────┬─────┬─────┬─────┬─────┐
│ Item│ Item│ Item│ (空) │ (空) │
└─────┴─────┴─────┴─────┴─────┘
    ↑ 空のトラックが残る

auto-fit: 空セルを埋める

【幅広い画面の場合】
┌────────┬────────┬────────┐
│  Item  │  Item  │  Item  │ ← 伸びて空間を埋める
└────────┴────────┴────────┘

いつどちらを使う？

用途	推奨	理由
カードを等幅で並べたい	auto-fill	空のスペースを保持して、カード幅を一定に
画面いっぱいに広げたい	auto-fit	アイテムを伸ばして空間を埋める

---

🎨 実用パターン集

パターン1: 3カラムカードグリッド（レスポンシブ）

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

• 250px以下にならないカードを自動配置
• 画面幅に応じて自動的にカラム数が変わる

---

パターン2: ヘッダー＋サイドバー＋メイン＋フッター

.layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  gap: 16px;
  min-height: 100vh;
}

---

パターン3: 画像ギャラリー（Masonry風）

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: 200px;
  gap: 8px;
}

.gallery-item:nth-child(3n) {
  grid-row: span 2; /* 3つ目ごとに縦長 */
}

---

⚠️ よくあるハマりポイント

1. gapが効かない！

/* ❌ これでは効かない */
.container {
  display: block; /* Gridじゃない！ */
  gap: 16px;
}

/* ✅ 正しい */
.container {
  display: grid; /* Gridを指定 */
  gap: 16px;
}

---

2. frが思った通りに動かない

/* ❌ minmax()内で1frを使うとエラー的な挙動 */
grid-template-columns: repeat(3, minmax(1fr, 200px));

/* ✅ 正しい */
grid-template-columns: repeat(3, minmax(100px, 1fr));

👉 minmax()の最小値にはfrを使わない！

---

3. 子要素がはみ出す

/* 子要素に幅の長いコンテンツがあるとはみ出る */
.grid-item {
  /* ✅ これを追加 */
  min-width: 0;
  overflow: hidden;
}

---

📊 Flexbox vs Grid 使い分け早見表

用途	Flexbox	Grid
1次元レイアウト（横並び・縦並び）	✅ 最適	△ 使える
2次元レイアウト（行と列）	△ 複雑	✅ 最適
コンテンツ基準で可変	✅ 得意	△ 可能
厳密な配置制御	△ やや苦手	✅ 得意

---

✅ まとめ

• display: grid でGrid Containerを作る
• fr単位は比率で空間を分配する
• repeat()で簡潔に記述できる
• gapは要素間にだけスペースを作る
• grid-template-areasで直感的に配置
• auto-fitは空トラックを折りたたむ、auto-fillは空トラックを保持
• 2次元レイアウトならGrid一択！

---

🔗 参考リンク

• MDN: CSS Grid Layout
• CSS Tricks: A Complete Guide to Grid
• Grid by Example

---

この記事が「なんとなく」を「ちゃんと理解」に変える一助になれば嬉しいです！

次回は実際のプロジェクトでGridを使った実装例を紹介予定です。お楽しみに！🚀