CSS Grid入門 - グリッドレイアウトの基本概念を理解する

はじめに

Webサイトのレイアウトを構築する際、「ヘッダー・サイドバー・メインコンテンツ・フッターを配置したい」「複数のカードを格子状に並べたい」「画像ギャラリーを作りたい」といった要件に直面します。これらの課題を強力かつ直感的に解決できるのが、CSS Grid（グリッドレイアウト）です。

CSS Gridは2017年頃から主要ブラウザでサポートが進み、現在ではモダンWebレイアウトに欠かせない技術となっています。行と列の両方を同時に制御できる二次元レイアウトを実現するため、ページ全体のレイアウトからコンポーネント内部の配置まで、あらゆる場面で活用されています。

本記事では、CSS Gridの基本概念について以下の内容を解説します。

• CSS Gridの仕組みと用語（グリッドコンテナ・グリッドアイテム・グリッドライン・グリッドセル・グリッドトラック・グリッドエリア）
• grid-template-columnsとgrid-template-rowsによるトラック定義
• frユニットを使った柔軟なサイズ指定
• repeat()関数による効率的な記述
• gapプロパティによる間隔制御

前提条件

本記事を読み進めるにあたり、以下の知識があることを前提としています。

• HTMLの基本的なタグ構造（div、section、articleなど）
• CSSの基本構文（セレクタ・プロパティ・値の関係）
• displayプロパティの基本的な理解
• Flexboxの基本概念（比較のため推奨）

動作確認環境

• Google Chrome 131以降
• Firefox 133以降
• Safari 18以降
• Microsoft Edge 131以降

CSS Gridとは

CSS Gridは「CSS Grid Layout Module」の正式名称で、要素を行と列の二次元グリッド上に配置するためのCSSレイアウトモデルです。MDN Web Docsでは次のように説明されています。

CSS グリッドレイアウトは、2次元グリッドシステムをCSSにもたらします。グリッドは、主要なページ領域や小さなユーザーインターフェイス要素のレイアウトに利用できます。

「二次元」という表現がポイントです。CSS Gridは行（横方向）と列（縦方向）の両方を同時に制御します。これに対して、Flexboxは行か列のいずれか一方向を制御する一次元レイアウトモデルです。

flowchart TB
    subgraph flexbox["Flexbox（一次元）"]
        direction LR
        A["アイテム1"] --> B["アイテム2"] --> C["アイテム3"]
    end
    
    subgraph grid["Grid（二次元）"]
        D["1,1"] --- E["1,2"] --- F["1,3"]
        G["2,1"] --- H["2,2"] --- I["2,3"]
    end

CSS Gridを使う場面

CSS Gridは以下のようなレイアウトに最適です。

CSS Gridの基本用語

CSS Gridを理解するためには、まず専門用語を押さえておく必要があります。以下の6つの概念がCSS Gridの基盤となります。

グリッドコンテナ（Grid Container）

display: gridまたはdisplay: inline-gridを指定した要素がグリッドコンテナになります。グリッドコンテナはグリッドレイアウトの親要素であり、この中にグリッドアイテムが配置されます。

1
2
3

.container {
  display: grid;
}

グリッドアイテム（Grid Item）

グリッドコンテナの直接の子要素がグリッドアイテムになります。孫要素以降はグリッドアイテムではありません。

1
2
3
4
5
6
7
8

<div class="container">
  <div>グリッドアイテム1</div>
  <div>グリッドアイテム2</div>
  <div>
    グリッドアイテム3
    <span>これはグリッドアイテムではない</span>
  </div>
</div>

グリッドライン（Grid Line）

グリッドを構成する水平線と垂直線です。グリッドラインには1から始まる番号が自動的に割り当てられます。3列のグリッドには4本の縦線（列ライン）があり、2行のグリッドには3本の横線（行ライン）があります。

flowchart TB
    subgraph grid["3列 × 2行のグリッド"]
        direction TB
        subgraph row1[""]
            A["セル"] --- B["セル"] --- C["セル"]
        end
        subgraph row2[""]
            D["セル"] --- E["セル"] --- F["セル"]
        end
    end

上記のグリッドでは以下のようにラインが存在します。

• 列ライン：1, 2, 3, 4（4本）
• 行ライン：1, 2, 3（3本）

グリッドトラック（Grid Track）

隣接する2本のグリッドライン間の空間です。列トラック（縦方向のトラック）と行トラック（横方向のトラック）があります。

グリッドセル（Grid Cell）

4本のグリッドラインで囲まれた最小単位の領域です。HTMLテーブルのセルに相当します。

グリッドエリア（Grid Area）

1つ以上のグリッドセルで構成される矩形の領域です。グリッドエリアは必ず長方形でなければならず、L字型などは作成できません。

グリッドコンテナの作成

CSS Gridを使うには、まず親要素をdisplay: gridでグリッドコンテナにします。

1
2
3
4
5
6
7

<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>

1
2
3

.wrapper {
  display: grid;
}

この状態では、単一列のグリッドが作成されるだけで、見た目に大きな変化はありません。グリッドを実際に活用するには、列トラックと行トラックを定義する必要があります。

grid-template-columnsで列トラックを定義する

grid-template-columnsプロパティを使用して、グリッドの列トラックを定義します。

固定幅の列を作成する

ピクセル単位で固定幅の列を作成できます。

1
2
3
4

.wrapper {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

このCSSは、幅200pxの列を3つ持つグリッドを作成します。グリッドアイテムは各セルに順番に配置されます。

1
2
3
4
5
6
7

<div class="wrapper">
  <div class="item">One</div>
  <div class="item">Two</div>
  <div class="item">Three</div>
  <div class="item">Four</div>
  <div class="item">Five</div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

.wrapper {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  gap: 10px;
}

.item {
  background-color: #3498db;
  color: white;
  padding: 20px;
  text-align: center;
}

この例では、5つのアイテムが3列のグリッドに配置されます。最初の3つが1行目に、残りの2つが2行目に自動的に配置されます。

frユニットで可変幅の列を作成する

CSS Gridには、柔軟なグリッドトラックを作成するための特別な単位fr（fraction）が用意されています。frユニットはグリッドコンテナ内の利用可能な空間の比率を表します。

1
2
3
4

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

このCSSは、利用可能な空間を3等分した列を作成します。コンテナの幅が変わっても、各列は常に1:1:1の比率を維持します。

異なる比率の列を作成する

frユニットの値を変えることで、異なる比率の列を作成できます。

1
2
3
4

.wrapper {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
}

この例では、利用可能な空間が4つに分割され、最初の列に2つ分、残りの2列にそれぞれ1つ分が割り当てられます。つまり、最初の列は他の列の2倍の幅になります。

固定幅とfrユニットの組み合わせ

固定幅のトラックとfrユニットを組み合わせることも可能です。

1
2
3
4

.wrapper {
  display: grid;
  grid-template-columns: 300px 1fr 2fr;
}

この場合、以下の計算が行われます。

1. 最初の列に300pxが確保される
2. 残りの空間が3つに分割される（1fr + 2fr = 3fr）
3. 2列目に残り空間の1/3、3列目に2/3が割り当てられる

この柔軟性により、サイドバーを固定幅にしつつメインコンテンツを可変幅にするといったレイアウトが簡単に実現できます。

1
2
3
4
5

.layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 20px;
}

grid-template-rowsで行トラックを定義する

grid-template-rowsプロパティを使用して、グリッドの行トラックを定義します。列トラックと同じ構文を使用できます。

1
2
3
4
5

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 200px;
}

このCSSは、3列2行のグリッドを作成します。1行目は高さ100px、2行目は高さ200pxになります。

明示的グリッドと暗黙的グリッド

grid-template-columnsとgrid-template-rowsで定義したグリッドを**明示的グリッド（Explicit Grid）**と呼びます。

一方、定義した行数・列数を超えるアイテムがある場合、グリッドは自動的に追加の行（または列）を生成します。これを**暗黙的グリッド（Implicit Grid）**と呼びます。

1
2
3
4
5
6

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px 100px;
  /* 2行しか定義していない */
}

1
2
3
4
5
6
7
8
9

<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div> <!-- この要素は暗黙的グリッドに配置される -->
</div>

7番目のアイテムは、暗黙的に生成された3行目に配置されます。

grid-auto-rowsで暗黙的グリッドのサイズを制御する

暗黙的に生成される行のサイズは、grid-auto-rowsプロパティで制御できます。

1
2
3
4
5

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 200px;
}

この設定により、すべての暗黙的行が高さ200pxで生成されます。

repeat()関数で効率的に記述する

同じパターンのトラックを繰り返す場合、repeat()関数を使用すると効率的に記述できます。

基本的な使い方

1
2
3
4
5
6
7
8
9

/* repeat()を使わない場合 */
.wrapper {
  grid-template-columns: 1fr 1fr 1fr;
}

/* repeat()を使う場合 */
.wrapper {
  grid-template-columns: repeat(3, 1fr);
}

両者は同じ結果になりますが、repeat()を使うことで記述がシンプルになります。

repeat()と他の値の組み合わせ

repeat()は、トラックリストの一部としても使用できます。

1
2
3
4

.wrapper {
  display: grid;
  grid-template-columns: 50px repeat(3, 1fr) 50px;
}

このCSSは5列のグリッドを作成します。

• 1列目：50px固定
• 2〜4列目：各1fr（等分）
• 5列目：50px固定

複数トラックパターンの繰り返し

repeat()の第2引数には、複数のトラックサイズを指定できます。

1
2
3
4

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr 2fr);
}

このCSSは8列のグリッドを作成します（1fr、2fr のパターンが4回繰り返される）。

minmax()関数でサイズの範囲を指定する

minmax()関数を使用すると、トラックの最小サイズと最大サイズを指定できます。

1
2
3
4
5

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
}

この設定により、各行は以下のように動作します。

• 最小高さ：100px
• 最大高さ：コンテンツに合わせて自動調整（auto）

コンテンツが少ない場合でも100pxの高さが確保され、コンテンツが多い場合は自動的に拡張されます。

1
2
3
4
5
6
7
8

<div class="wrapper">
  <div class="item">短いテキスト</div>
  <div class="item">
    長いテキストが入ります。このセルはコンテンツに合わせて
    高さが自動的に調整されます。
  </div>
  <div class="item">中程度のテキスト</div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
  gap: 10px;
}

.item {
  background-color: #2ecc71;
  color: white;
  padding: 20px;
}

gapプロパティで間隔を制御する

グリッドセル間の間隔（溝・ガター）は、gapプロパティで制御します。

列間と行間に同じ間隔を設定

1
2
3
4
5

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

列間と行間に異なる間隔を設定

1
2
3
4
5

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 10px; /* 行間 列間 */
}

または、個別のプロパティを使用することもできます。

1
2
3
4
5
6

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 20px;
  column-gap: 10px;
}

gapで確保された空間には、アイテムを配置することはできません。グリッドラインを基準とした配置では、間隔は太い透明な線のように扱われます。

実践例：基本的なグリッドレイアウト

ここまで学んだ内容を組み合わせて、実践的なグリッドレイアウトを作成してみます。

3列のカードグリッド

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<div class="card-grid">
  <div class="card">
    <h3>カード1</h3>
    <p>カードの内容がここに入ります。</p>
  </div>
  <div class="card">
    <h3>カード2</h3>
    <p>カードの内容がここに入ります。</p>
  </div>
  <div class="card">
    <h3>カード3</h3>
    <p>カードの内容がここに入ります。</p>
  </div>
  <div class="card">
    <h3>カード4</h3>
    <p>カードの内容がここに入ります。</p>
  </div>
  <div class="card">
    <h3>カード5</h3>
    <p>カードの内容がここに入ります。</p>
  </div>
  <div class="card">
    <h3>カード6</h3>
    <p>カードの内容がここに入ります。</p>
  </div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 20px;
}

.card {
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card h3 {
  margin: 0 0 12px 0;
  color: #333;
}

.card p {
  margin: 0;
  color: #666;
  line-height: 1.6;
}

サイドバー付きレイアウト

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

<div class="layout">
  <aside class="sidebar">
    <nav>
      <ul>
        <li>メニュー1</li>
        <li>メニュー2</li>
        <li>メニュー3</li>
      </ul>
    </nav>
  </aside>
  <main class="main-content">
    <h1>メインコンテンツ</h1>
    <p>ここにメインコンテンツが入ります。</p>
  </main>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

.layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 20px;
  min-height: 100vh;
}

.sidebar {
  background-color: #2c3e50;
  color: white;
  padding: 20px;
}

.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar li {
  padding: 10px 0;
  border-bottom: 1px solid #34495e;
}

.main-content {
  padding: 20px;
  background-color: #ecf0f1;
}

FlexboxとCSS Gridの使い分け

FlexboxとCSS Gridはどちらも強力なレイアウトシステムですが、それぞれ得意な場面が異なります。

Flexboxが適している場面

• ナビゲーションバーのメニュー項目配置
• ボタングループの配置
• カード内部のコンテンツ整列
• 要素の中央揃え

CSS Gridが適している場面

• ページ全体のレイアウト構造
• 画像ギャラリー
• ダッシュボードのウィジェット配置
• フォームのラベルと入力欄の整列

実際の開発では、両者を組み合わせて使用することが多くなります。例えば、ページ全体のレイアウトはCSS Gridで定義し、各セクション内のコンテンツ配置にはFlexboxを使用する、といったアプローチが一般的です。

まとめ

本記事では、CSS Gridの基本概念について解説しました。

• CSS Gridとは：行と列の二次元グリッドで要素を配置するレイアウトシステム
• 基本用語：グリッドコンテナ、グリッドアイテム、グリッドライン、グリッドセル、グリッドトラック、グリッドエリア
• トラック定義：grid-template-columnsとgrid-template-rowsで列と行のサイズを指定
• frユニット：利用可能な空間を比率で分配する柔軟な単位
• repeat()関数：同じパターンのトラックを効率的に繰り返す
• minmax()関数：トラックの最小・最大サイズを指定
• gap：グリッドセル間の間隔を制御

CSS Gridをマスターすることで、複雑なWebレイアウトを直感的かつ効率的に実装できるようになります。次回の記事では、グリッドアイテムの配置方法（grid-column、grid-row、grid-area）について詳しく解説します。

参考リンク

• CSS グリッドレイアウト - MDN Web Docs
• グリッドレイアウトの基本概念 - MDN Web Docs
• grid-template-columns - MDN Web Docs
• grid-template-rows - MDN Web Docs
• CSS Grid Layout Module Level 2 - W3C
• Grid by Example - Rachel Andrew
• CSS Grid Garden - ゲームで学ぶCSS Grid