CSS Grid アイテム

グリッドコンテナの直系の子要素は、自動的に グリッドアイテム（Grid Items） となります。本セクションでは、個別のアイテムをグリッド上の特定の場所に配置するためのプロパティを解説します。

1. グリッドアイテムとライン番号

グリッドアイテムを配置する際、ブラウザが生成する グリッドライン（Grid Lines） を参照します。グリッドラインは、カラムの境界線である「カラムライン」と、行の境界線である「行ライン」で構成され、それぞれ 1 から始まる番号が割り振られています。

2. grid-column プロパティ

grid-column プロパティは、アイテムをどのカラムに配置するかを指定します。これは、アイテムが始まるカラムラインと終わるカラムラインを定義することで、アイテムの幅（カラムをまたぐ数）を決定します。

2.1 カラムラインの指定

grid-column-start と grid-column-end を使用して個別に指定することも、grid-column ショートハンドを使用して一括で指定することも可能です。

.item1 {
  /* カラムライン 1 から始まり、カラムライン 3 で終わる（2カラム分を占有） */
  grid-column-start: 1;
  grid-column-end: 3;
}

/* ショートハンドによる記述（開始 / 終了） */
.item1 {
  grid-column: 1 / 3;
}

2.2 span キーワードによる結合

span キーワードを使用すると、「いくつのカラム分を占有するか」を直感的に指定できます。

.item1 {
  /* カラムライン 1 から始まり、3カラム分を占有する */
  grid-column: 1 / span 3;
}

3. grid-row プロパティ

grid-row プロパティは、アイテムをどの行（ロウ）に配置するかを指定します。grid-column と同様に、開始ラインと終了ラインを定義します。

3.1 行ラインの指定

.item1 {
  /* 行ライン 1 から始まり、行ライン 3 で終わる（2行分を占有） */
  grid-row-start: 1;
  grid-row-end: 3;
}

/* ショートハンドによる記述 */
.item1 {
  grid-row: 1 / 3;
}

3.2 span キーワードの使用

.item1 {
  /* 行ライン 1 から始まり、2行分を占有する */
  grid-row: 1 / span 2;
}

4. grid-area プロパティ

grid-area プロパティは、grid-row-start、grid-column-start、grid-row-end、grid-column-end を 1 つの宣言で指定できる強力なショートハンドです。

4.1 基本構文

指定する順番は、行開始 / カラム開始 / 行終了 / カラム終了 となります。

.item8 {
  /* 行 1 から始まり、カラム 2 から始まり、行 3 で終わり、カラム 5 で終わる */
  grid-area: 1 / 2 / 3 / 5;
}

5. グリッドアイテムに名前を付ける

grid-area プロパティは、グリッドアイテムに名前（エイリアス）を付けるためにも使用されます。この名前は、親コンテナの grid-template-areas プロパティでレイアウトを定義する際に参照されます。

5.1 ネーミングと配置の例

アイテムに名前を付け、それをコンテナ側でレイアウトに組み込む手法は、非常に読みやすいコードを実現します。

/* アイテムに名前を割り当てる */
.item1 {
  grid-area: myArea;
}

/* コンテナ側でその名前を使用してレイアウトを組む */
.grid-container {
  display: grid;
  grid-template-areas: 'myArea myArea . . .';
}

5.2 複雑なレイアウトの定義

以下の例では、ヘッダー、メニュー、メイン、フッターという名前を各アイテムに付け、ページ全体の構造を定義しています。

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

.grid-container {
  display: grid;
  grid-template-areas:
    'header header header header header header'
    'menu main main main main main'
    'footer footer footer footer footer footer';
}

6. グリッドアイテムプロパティ一覧

グリッドアイテムの配置をマスターすることで、ネガティブマージンや複雑な絶対位置指定（position: absolute）を使わずに、ピクセル単位で正確な 2 次元レイアウトを構築できるようになります。特に grid-area を使ったセマンティックなネーミングによるレイアウト手法は、チーム開発におけるコードの可読性を飛躍的に高めるため、積極的に採用すべきパターンです。