CSS Grid レイアウト

Volardev 編集部 April 13, 2026

1. CSS Grid レイアウトモジュール

CSS Grid レイアウトモジュール（CSS Grid Layout Module）は、行（行）とカラム（列）を備えたグリッドベースのレイアウトシステムを提供します。これにより、フロート（Float）やポジショニング（Positioning）を使用することなく、ウェブページの設計が大幅に容易になります。

2. グリッドコンテナとグリッドアイテム

グリッドレイアウトを実現するには、親要素を グリッドコンテナ（Grid Container） として定義し、その直系の子要素を グリッドアイテム（Grid Items） とします。

2.1 実装例（HTML）

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

3. display プロパティ

HTML 要素をグリッドコンテナにするには、display プロパティを grid または inline-grid に設定します。

.grid-container {
  /* グリッドコンテナとして定義 */
  display: grid;
}

4. グリッドカラム (Grid Columns)

グリッドアイテムの垂直方向の並びを カラム（Columns） と呼びます。

4.1 カラムの定義例

grid-template-columns プロパティを使用して、カラムの数とそれぞれの幅を指定できます。

.grid-container {
  display: grid;
  /* 3つのカラムを定義し、それぞれの幅を指定 */
  grid-template-columns: auto auto auto;
}

5. グリッド行 (Grid Rows)

グリッドアイテムの水平方向の並びを 行（Rows） と呼びます。

5.1 行の定義例

grid-template-rows プロパティを使用して、各行の高さを指定できます。

.grid-container {
  display: grid;
  /* 2つの行を定義し、それぞれの高さを指定 */
  grid-template-rows: 100px 200px;
}

6. グリッドギャップ (Grid Gaps)

カラム間および行間のスペースは、ギャップ（Gaps）と呼ばれます。

6.1 各ギャッププロパティ

column-gap: カラム間の余白を指定。
row-gap: 行間の余白を指定。
gap: row-gap と column-gap を一括で指定するショートハンド。

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  /* カラム間と行間の両方に50pxの余白を設定 */
  gap: 50px;
}

7. グリッドライン (Grid Lines)

カラムの間の境界線を カラムライン（Column Lines）、行の間の境界線を 行ライン（Row Lines） と呼びます。

グリッドアイテムを配置する際、これらのライン番号を参照して、アイテムがどこから始まり、どこで終わるかを指定できます。

7.1 ライン指定の例

以下のコードは、1番目のアイテムをカラムライン 1 から始まり、カラムライン 3 で終わるように配置します。

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

CSS Grid は、特に 2 次元（水平方向と垂直方向の両方）のレイアウト制御において Flexbox 以上の威力を発揮します。これら 2 つのモジュールを適切に使い分けることで、現代の複雑なウェブ UI を柔軟かつシンプルに実装できるようになります。