CSS 入門

CSS Grid アイテムの配置：grid-row と grid-column 属性

前章では、CSS Grid の概要と grid-template-rows および grid-template-columns を使用してグリッドコンテナの構造を定義する方法を紹介しました。

今回は、そのグリッド構造内にアイテムを配置する方法を深掘りします。grid-row-start、grid-row-end、grid-column-start、grid-column-end というプロパティについて学び、個別のグリッドアイテムの配置とサイズを精密にコントロールする手法をマスターしましょう。

1. グリッド線 (Grid Lines) と配置の理解

grid-row-start などのプロパティを使用してアイテムを配置する際の核となる概念は、「グリッド線」の参照です。行や列を定義すると、暗黙的に番号が振られたグリッド線が作成されます。これらの線が、グリッドアイテムをポジショニングするための基準点となります。

  • グリッド線 (Grid Lines): グリッド構造を定義する水平および垂直の線。1 から順番に番号が振られます。
  • grid-row-start: アイテムが開始される行の線番号を指定します。
  • grid-row-end: アイテムが終了する行の線番号を指定します。
  • grid-column-start: アイテムが開始される列の線番号を指定します。
  • grid-column-end: アイテムが終了する列の线番号を指定します。

これは、グリッド上の座標を指定するようなものだと考えてください。行の線と列の線の開始・終了位置を定義することで、グリッド内での正確な位置とサイズを決定できます。

2. grid-row-start と grid-column-start の使用

grid-row-start と grid-column-start プロパティは、グリッドアイテムの開始位置を定義します。

2.1 基礎的な例

3行3列のグリッドを想定します。開始する行と列を指定することで、アイテムを左上に配置できます。

.grid-container {
  display: grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
}
.item {
  grid-row-start: 1; /* 1番目の行線から開始 */
  grid-column-start: 1; /* 1番目の列線から開始 */
}

この例では、.item はグリッドの最初のセルに配置されます。

2.2 アイテムの重なり (Overlapping Items)

複数のアイテムを同じセルに配置し、重ねることも可能です。

<div class="grid-container">
  <div class="item item1">アイテム 1</div>
  <div class="item item2">アイテム 2</div>
</div>
.grid-container {
  display: grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
}
.item {
  grid-row-start: 1;
  grid-column-start: 1;
}

item1 と item2 はどちらも行線 1 と列线 1 から開始されるため、左上のセルで重なります。どちらが上に表示されるかは、HTML 内の記述順（スタック文脈 / Stacking Context）によって決まります。これはポジショニング要素のモジュールで学んだ内容と同じ原理です。

活用シナリオ: ダッシュボードのレイアウトを構築する場合を想像してください。grid-row-start と grid-column-start を使用して、さまざまなウィジェットをグリッド構造内に配置し、各ウィジェットが指定したエリアから確実に開始されるように制御できます。

3. grid-row-end と grid-column-end の使用

grid-row-end と grid-column-end プロパティはアイテムの終了位置を定義し、アイテムがどのグリッド線まで伸びるかを指定します（指定した線そのものは含まれません）。これにより、アイテムを複数の行や列にまたがせることが可能になります。

3.1 基礎的な例：列をまたぐ

アイテムを2列にまたがせるには、grid-column-end を grid-column-start より大きい値に設定します。

.grid-container {
  display: grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
}
.item {
  grid-row-start: 1;
  grid-column-start: 1;
  grid-column-end: 3; /* 列線 3 まで伸ばす (2列分を占有) */
}

この場合、.item は第 1 行線と第 1 列線から開始し、第 3 列線まで伸びるため、実質的に 2 列分を占有します。

3.2 基礎的な例：行をまたぐ

同様に、アイテムを 2 行にまたがせる場合は以下のようになります。

.grid-container {
  display: grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
}
.item {
  grid-row-start: 1;
  grid-column-start: 1;
  grid-row-end: 3; /* 行線 3 まで伸ばす (2行分を占有) */
}

これで、.item はグリッドの最初の 2 行を占有します。

3.3 行と列の両方を同時にまたぐ

これらのプロパティを組み合わせることで、複数行・複数列にわたる大きなアイテムを作成できます。

.grid-container {
  display: grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
}
.item {
  grid-row-start: 1;
  grid-column-start: 1;
  grid-row-end: 3;    /* 行線 3 まで伸ばす (2行分) */
  grid-column-end: 4; /* 列線 4 まで伸ばす (3列分) */
}

このアイテムは、グリッドの左上から 2行3列 の範囲を占有します。

4. span キーワードの活用

明確な終了線の番号を指定する代わりに、span キーワードを使用して「いくつのトラック（行や列）を跨ぐか」を、開始位置からの相対的な数で定義できます。

4.1 span キーワード詳解

span キーワードは、アイテムがカバーすべきトラックの数を指定します。終了線の番号を計算するのが面倒な場合や、単純に「何マス分広げたいか」だけが決まっている場合に構文を簡略化できます。

4.2 例：span を使って 2 列をまたぐ

.grid-container {
  display: grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
}
.item {
  grid-row-start: 1;
  grid-column-start: 1;
  grid-column-end: span 2; /* 列線 1 から開始して 2 列分またぐ */
}

これは、先ほどの grid-column-end: 3 と同等です。

4.3 例：span を使って 3 行をまたぐ

.grid-container {
  display: grid;
  grid-template-rows: 100px 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
}
.item {
  grid-row-start: 2;
  grid-column-start: 1;
  grid-row-end: span 3; /* 行線 2 から開始して 3 行分またぐ */
}

ここでは、アイテムは行線 2 から開始し、第 2、3、4 行を占有します。

4.4 span を使用するメリット

  • 可読性: span を使うと、特に複雑なレイアウトにおいて、コードがより読みやすく理解しやすくなります。「特定の数のトラックを跨ぐ」という意図が明確になるからです。
  • メンテナンス性: グリッド構造を変更（行や列を追加・削除）した場合でも、span を使っていれば、開始位置からの相対的な範囲は変わらないため、終了位置の数値を更新する手間が省けます。

4.5 明示的な線番号と span の組み合わせ

線番号と span を混在させて、よりダイナミックなレイアウトを作成することも可能です。

.grid-container {
  display: grid;
  grid-template-rows: repeat(4, 100px);
  grid-template-columns: repeat(4, 100px);
}
.item {
  grid-row-start: 2;
  grid-column-start: 3;
  grid-row-end: span 2; /* 行線 2 から 2 行分またぐ */
  grid-column-end: 4;    /* 列線 4 で終了する */
}

この例では、アイテムは行線 2 と列线 3 から開始し、下方向へ 2 行分広がり、列方向は線番号 4 で終了します。

5. 暗黙的グリッド (Implicit Grid) の作成

明示的に定義されたグリッド（grid-template-rows や grid-template-columns で指定した範囲）の外側にアイテムを配置すると、CSS Grid はそのアイテムを収めるために「暗黙的グリッドトラック」を自動的に作成します。

5.1 暗黙的グリッドの仕組み

grid-row-start などを使用してアイテムを配置する際、指定した線番号が明示的な範囲を超えている場合、グリッドコンテナは自動的に行や列を生成します。これらの暗黙的トラックのサイズは通常、コンテンツに基づいて自動的に決定されます。

5.2 例：暗黙的な行への配置

.grid-container {
  display: grid;
  grid-template-rows: 100px 100px; /* 明示的な行は 2 つだけ */
  grid-template-columns: 100px 100px 100px;
}
.item {
  grid-row-start: 3; /* 第 3 行に配置 */
  grid-column-start: 1;
}

この場合、行は 2 つしか定義していませんが、グリッドは .item を収めるために自動的に 3 行目（暗黙的な行）を作成します。

5.3 暗黙的グリッドの影響

  • 柔軟性: 明示的な構造の外側にもアイテムを配置できるため、非常に柔軟な設計が可能です。
  • 予測困難性: ただし、暗黙的グリッドに頼りすぎると、ブラウザがサイズを自動決定するため、レイアウトが予測しにくくなる場合があります。確実なコントロールが必要な場合は、grid-template-rows などで明示的に定義することをお勧めします。