はじめに

CSS Gridでグリッドコンテナを作成した後、次に重要になるのが「グリッドアイテムをどこに配置するか」という問題です。デフォルトでは、グリッドアイテムは自動的に左上から順番に配置されますが、CSS Gridの真価は任意の位置にアイテムを自由に配置できる点にあります。

本記事では、CSS Gridにおけるグリッドアイテムの配置方法について以下の内容を解説します。

  • grid-columnとgrid-rowによるライン番号を使った配置
  • spanキーワードによる複数トラックへのまたがり
  • grid-areaプロパティによる一括指定
  • grid-template-areasを使った視覚的なレイアウト定義
  • 明示的グリッドと暗黙的グリッドの違い

前提条件

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

  • CSS Gridの基本概念（グリッドコンテナ、グリッドアイテム、グリッドライン）
  • grid-template-columnsとgrid-template-rowsによるトラック定義
  • frユニットとrepeat()関数の基本的な使い方

CSS Gridの基本概念については、前回の記事「CSS Grid入門 - グリッドレイアウトの基本概念を理解する」で詳しく解説しています。

動作確認環境

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

グリッドラインによる配置の基本

CSS Gridでは、グリッドラインに番号が割り当てられており、この番号を使ってアイテムの配置位置を指定します。ライン番号は1から始まり、左から右（または上から下）に向かって増加します。

グリッドラインの番号体系

3列×2行のグリッドを例に、ライン番号の概念を理解しましょう。

graph TB
    subgraph grid["3列 × 2行のグリッド"]
        direction TB
        L1["列ライン 1"] --- L2["列ライン 2"] --- L3["列ライン 3"] --- L4["列ライン 4"]
    end

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

方向 ライン番号 本数
列（縦方向のライン） 1, 2, 3, 4 4本
行（横方向のライン） 1, 2, 3 3本

3列のグリッドには4本の列ライン、2行のグリッドには3本の行ラインがあります。トラック数より1本多いラインが存在する点を覚えておきましょう。

grid-columnとgrid-rowによる配置

grid-columnとgrid-rowプロパティを使うと、グリッドアイテムの開始位置と終了位置をライン番号で指定できます。

個別プロパティによる配置

まず、個別のプロパティを使った配置方法を見てみましょう。

1
2
3
4
5
6

<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
  <div class="box4">Four</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
26
27
28
29
30
31
32
33
34

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

.box1 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 4;
}

.box2 {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
}

.box3 {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}

.box4 {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 3;
  grid-row-end: 4;
}

この例では、各アイテムの配置を以下のように指定しています。

アイテム 列の範囲 行の範囲 説明
box1 1〜2 1〜4 左端で3行分を占有
box2 3〜4 1〜3 右端で2行分を占有
box3 2〜3 1〜2 中央上部に1セル
box4 2〜4 3〜4 下部で2列分を占有

一括指定（ショートハンド）による配置

個別プロパティを使うとコードが冗長になるため、grid-columnとgrid-rowというショートハンドプロパティを使うのが一般的です。開始ラインと終了ラインをスラッシュ（/）で区切って指定します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

.box1 {
  grid-column: 1 / 2;
  grid-row: 1 / 4;
}

.box2 {
  grid-column: 3 / 4;
  grid-row: 1 / 3;
}

.box3 {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

.box4 {
  grid-column: 2 / 4;
  grid-row: 3 / 4;
}

コードがシンプルになり、可読性が向上しました。

デフォルトのスパン（1トラック）

アイテムが1つのトラックにしかまたがらない場合、終了ラインを省略できます。CSS Gridのデフォルトでは、アイテムは1トラック分の幅を持ちます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

.box1 {
  grid-column: 1;
  grid-row: 1 / 4;
}

.box2 {
  grid-column: 3;
  grid-row: 1 / 3;
}

.box3 {
  grid-column: 2;
  grid-row: 1;
}

.box4 {
  grid-column: 2 / 4;
  grid-row: 3;
}

grid-column: 1はgrid-column: 1 / 2と同じ意味になります。

負のライン番号による配置

グリッドの末尾から逆方向にカウントする負のライン番号も使用できます。明示的グリッドの末尾のラインは-1として参照でき、そこから逆算して-2、-3と続きます。

1
2
3
4

/* グリッド全体に広がるヘッダー */
.header {
  grid-column: 1 / -1;
}

grid-column: 1 / -1は「1番目のラインから最後のラインまで」という意味になり、グリッド全体の幅に広がるアイテムを作成できます。これはレスポンシブデザインで特に有用で、列数が変わってもコードを変更する必要がありません。

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

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

.box1 {
  grid-column-start: -1;
  grid-column-end: -2;
  grid-row-start: -1;
  grid-row-end: -4;
}

この例では、box1は右下から配置されます。負のライン番号を使うことで、レイアウトを反転させることも可能です。

spanキーワードによるトラック指定

開始ラインと終了ラインを両方指定する代わりに、spanキーワードを使って「いくつのトラックにまたがるか」を指定できます。

基本的なspanの使い方

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

.box1 {
  grid-column: 1;
  grid-row: 1 / span 3;
}

.box2 {
  grid-column: 3;
  grid-row: 1 / span 2;
}

.box3 {
  grid-column: 2;
  grid-row: 1;
}

.box4 {
  grid-column: 2 / span 2;
  grid-row: 3;
}

grid-row: 1 / span 3は「行ライン1から始まり、3トラック分にまたがる」という意味です。結果として、行ライン1から行ライン4までを占有します。

spanを開始位置に使う

spanは終了位置だけでなく、開始位置にも使用できます。

1
2
3
4
5

.box1 {
  grid-column-start: 1;
  grid-row-start: span 3;
  grid-row-end: 4;
}

この例では、「行ライン4で終わり、そこから3トラック分を上方向に広がる」という指定になります。結果として行ライン1から4までを占有します。

spanの活用例：カードグリッド

spanキーワードは、特にカードレイアウトで便利です。一部のカードを目立たせたい場合に使用できます。

1
2
3
4
5
6
7
8

.card {
  /* 通常のカードは1セル */
}

.card.featured {
  grid-column: span 2;
  grid-row: span 2;
}

grid-areaプロパティによる一括指定

grid-areaプロパティを使うと、行と列の配置を1つのプロパティで指定できます。

grid-areaの構文

grid-areaの値は以下の順序で指定します。

grid-area: <row-start> / <column-start> / <row-end> / <column-end>;

順序を覚えるコツは「行の開始 → 列の開始 → 行の終了 → 列の終了」です。時計回りの上・右・下・左とは異なる順序なので注意が必要です。

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

.box1 {
  grid-area: 1 / 1 / 4 / 2;
}

.box2 {
  grid-area: 1 / 3 / 3 / 4;
}

.box3 {
  grid-area: 1 / 2 / 2 / 3;
}

.box4 {
  grid-area: 3 / 2 / 4 / 4;
}

なぜこの順序なのか

grid-areaの値の順序は、CSSの論理的プロパティ（書字方向に対応したプロパティ）の概念に基づいています。

  1. block-start（行の開始）
  2. inline-start（列の開始）
  3. block-end（行の終了）
  4. inline-end（列の終了）

これは「開始位置を先に、終了位置を後に」という論理的な順序に従っています。

grid-template-areasによる視覚的な配置

grid-template-areasプロパティを使うと、グリッドのレイアウトを視覚的に定義できます。これはCSS Gridの中でも特に直感的な機能です。

名前付きグリッドエリアの定義

1
2
3
4
5
6

<div id="page">
  <header>ヘッダー</header>
  <nav>ナビゲーション</nav>
  <main>メインコンテンツ</main>
  <footer>フッター</footer>
</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
29
30
31
32

#page {
  display: grid;
  width: 100%;
  height: 100vh;
  grid-template-areas:
    "head head"
    "nav  main"
    "nav  foot";
  grid-template-rows: 60px 1fr 50px;
  grid-template-columns: 200px 1fr;
  gap: 10px;
}

#page > header {
  grid-area: head;
  background-color: #3498db;
}

#page > nav {
  grid-area: nav;
  background-color: #e74c3c;
}

#page > main {
  grid-area: main;
  background-color: #2ecc71;
}

#page > footer {
  grid-area: foot;
  background-color: #9b59b6;
}

grid-template-areasでは、各行を文字列として定義し、同じ名前を持つセルが連続することでエリアを形成します。

視覚的レイアウトの読み方

上記の例では、レイアウトは以下のように定義されています。

"head head"   → 1行目：ヘッダーが2列分
"nav  main"   → 2行目：左にナビ、右にメイン
"nav  foot"   → 3行目：左にナビ（継続）、右にフッター

CSSコード上でレイアウトがそのまま視覚化されているため、非常に理解しやすくなっています。

空白セルの定義

グリッド内に空白を作りたい場合は、ドット（.）を使用します。

1
2
3
4
5
6
7
8
9

#page {
  display: grid;
  grid-template-areas:
    "head head head"
    "nav  main side"
    ".    foot foot";
  grid-template-rows: 60px 1fr 50px;
  grid-template-columns: 200px 1fr 150px;
}

ドットの位置はグリッドアイテムが配置されない空白のセルになります。複数のドット（...）を使用することもできますが、意味は同じです。

grid-template-areasの制約

grid-template-areasを使用する際には、いくつかの制約があります。

  1. 矩形エリアのみ：L字型やT字型のエリアは作成できません
  2. 連続したセル：同じ名前のセルは行または列方向に連続している必要があります
  3. 各行のセル数は同じ：すべての行で同じ数のセル名を定義する必要があります

不正な例：

1
2
3
4
5

/* これはエラーになる - L字型のエリアは不可 */
grid-template-areas:
  "head head"
  "nav  main"
  "nav  nav";  /* navがL字型になっている */

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

CSS Gridには「明示的グリッド」と「暗黙的グリッド」という2つの概念があります。この違いを理解することは、予期しないレイアウトを防ぐために重要です。

明示的グリッド

grid-template-columnsとgrid-template-rowsで定義したグリッドを「明示的グリッド」と呼びます。

1
2
3
4
5

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

この例では、3列×2行の明示的グリッドが作成されます。

暗黙的グリッド

明示的グリッドの範囲外にアイテムが配置される場合、CSS Gridは自動的に追加のトラック（行または列）を生成します。これを「暗黙的グリッド」と呼びます。

1
2
3
4
5
6
7

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

/* 7つ以上のアイテムがある場合、3行目以降が暗黙的に生成される */

暗黙的グリッドのサイズ制御

暗黙的に生成されるトラックのサイズはgrid-auto-rowsとgrid-auto-columnsで制御できます。

1
2
3
4
5
6

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 100px);
  grid-auto-rows: 150px; /* 暗黙的な行の高さ */
}

minmax()関数を使うと、より柔軟なサイズ指定が可能です。

1
2
3
4
5

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

minmax(100px, auto)は「最小100px、最大はコンテンツに応じて自動」という指定です。

負のライン番号と暗黙的グリッド

重要な注意点として、負のライン番号は明示的グリッドにのみ適用されます。暗黙的に生成された行や列は、負のライン番号では参照できません。

1
2
3
4
5
6
7
8
9

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* grid-template-rowsは未定義 → すべての行が暗黙的 */
}

.item {
  grid-row: 1 / -1; /* 暗黙的グリッドでは期待通りに動作しない */
}

自動配置と明示的配置の組み合わせ

CSS Gridでは、一部のアイテムを明示的に配置し、残りを自動配置させることができます。

基本的な組み合わせ

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

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

/* 一部のアイテムを明示的に配置 */
.item:nth-child(2) {
  grid-column: 3;
  grid-row: 2 / 4;
}

.item:nth-child(5) {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

/* 他のアイテムは自動配置される */

明示的に配置されたアイテムが先に配置され、残りのアイテムは空いているセルに自動的に配置されます。

grid-auto-flowによる自動配置の制御

grid-auto-flowプロパティを使うと、自動配置の方向とアルゴリズムを制御できます。

1
2
3
4
5
6
7
8

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 100px;
  grid-auto-flow: row;     /* デフォルト：行方向に配置 */
  /* grid-auto-flow: column; 列方向に配置 */
  /* grid-auto-flow: dense;  隙間を詰める */
}

denseキーワードを使うと、グリッドは隙間を埋めるようにアイテムを配置します。ただし、DOMの順序とは異なる順序でアイテムが表示される可能性があるため、アクセシビリティに注意が必要です。

実践例：ダッシュボードレイアウト

これまで学んだ技術を組み合わせて、ダッシュボードレイアウトを作成してみましょう。

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

<div class="dashboard">
  <header class="header">ダッシュボード</header>
  <nav class="sidebar">サイドバー</nav>
  <main class="main">
    <div class="widget large">ウィジェット1</div>
    <div class="widget">ウィジェット2</div>
    <div class="widget">ウィジェット3</div>
    <div class="widget wide">ウィジェット4</div>
    <div class="widget">ウィジェット5</div>
    <div class="widget">ウィジェット6</div>
  </main>
  <footer class="footer">フッター</footer>
</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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

.dashboard {
  display: grid;
  height: 100vh;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-rows: 60px 1fr 40px;
  grid-template-columns: 250px 1fr;
}

.header {
  grid-area: header;
  background-color: #2c3e50;
  color: white;
  display: flex;
  align-items: center;
  padding: 0 20px;
}

.sidebar {
  grid-area: sidebar;
  background-color: #34495e;
  color: white;
  padding: 20px;
}

.main {
  grid-area: main;
  background-color: #ecf0f1;
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(150px, auto);
  gap: 20px;
}

.footer {
  grid-area: footer;
  background-color: #2c3e50;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ウィジェットのバリエーション */
.widget {
  background-color: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.widget.large {
  grid-column: span 2;
  grid-row: span 2;
}

.widget.wide {
  grid-column: span 2;
}

この例では以下の技術を組み合わせています。

  • grid-template-areas：ページ全体のレイアウト構造を定義
  • ネストしたグリッド：メインエリア内でウィジェットをグリッド配置
  • spanキーワード：特定のウィジェットを大きく表示
  • grid-auto-rows：ウィジェットの最小高さを保証

まとめ

本記事では、CSS Gridにおけるグリッドアイテムの配置方法について解説しました。

  • ライン番号による配置：grid-columnとgrid-rowで開始ラインと終了ラインを指定
  • 負のライン番号：-1で末尾のラインを参照し、グリッド全体に広がる要素を作成
  • spanキーワード：トラック数を指定してアイテムを広げる
  • grid-area：行と列の配置を1つのプロパティで一括指定
  • grid-template-areas：名前付きエリアで視覚的にレイアウトを定義
  • 明示的グリッドと暗黙的グリッド：定義されたグリッドと自動生成されるグリッドの違い
  • 自動配置と明示的配置の組み合わせ：柔軟なレイアウト設計

CSS Gridのアイテム配置をマスターすることで、従来のCSSでは困難だった複雑なレイアウトを簡潔なコードで実現できます。次回の記事では、CSS Gridを使った実践的なレイアウトパターン（ページレイアウト、ギャラリー、ダッシュボード）について詳しく解説します。

参考リンク