CSS Gridのgap（ギャップ）とは？行と列の間隔を指定する方法を解説

CSS Gridのギャップ（Grid Gap）とは

CSS Gridレイアウトにおいて、行と列の間にできるスペースのことを「グリッドギャップ（Grid Gap）」と呼びます。下図のように、各セル同士の間に余白を設けることで、要素同士が密着せず、見やすく整ったレイアウトを作ることができます。

ギャップを指定するプロパティ

グリッドの間隔は、以下の3つのプロパティで制御できます。

1. row-gap（行間のギャップ）

行と行の間のスペースを指定します。

.container {
  display: grid;
  row-gap: 20px;
}

2. column-gap（列間のギャップ）

列と列の間のスペースを指定します。

.container {
  display: grid;
  column-gap: 30px;
}

3. gap（ショートハンド）

row-gap と column-gap をまとめて指定できる省略形のプロパティです。

.container {
  display: grid;
  gap: 20px 30px; /* 行 20px、列 30px */
}

値を1つだけ指定した場合は、行・列ともに同じ間隔が適用されます。

.container {
  display: grid;
  gap: 24px; /* 行・列ともに 24px */
}

marginとの違い

従来は要素間の余白を作るために margin を使うことが一般的でしたが、Gridの gap を使うと以下のようなメリットがあります。

• 最初や最後の要素に余分なマージンが付かないため、調整が不要になる
• コンテナ側で一括管理できるため、コードがシンプルになる
• Flexboxでも同じ gap プロパティが使えるため、記述方法を統一できる

対応ブラウザについて

かつては grid-row-gap や grid-column-gap といった接頭辞付きの名称が使われていましたが、現在はすべてのモダンブラウザで row-gap・column-gap・gap がサポートされています。新規のコーディングでは、標準的な gap プロパティを使用するのがおすすめです。

まとめ

CSS Gridのギャップは、行と列の間隔を簡単かつ柔軟に設定できる便利な機能です。gap プロパティを活用すれば、marginの個別調整の手間を省き、保守性の高いレイアウトを実現できます。ぜひ日頃のコーディングに取り入れてみてください。