CSS Grid ギャップ（間距）

grid-gap は、CSS Gridにおいてグリッドアイテム（grid items）間の余白を制御するための基礎的かつ重要なプロパティです。これは、グリッドレイアウトの行（row）と列（column）の間に「溝（gutters）」を作成するためのシンプルで効率的な方法を提供し、コンテンツの可読性と視覚的な魅力を大幅に向上させます。

この章では、grid-gap のあらゆる側面を詳細に検討し、プロジェクトで効果的に実装するための知識とスキルを提供します。

1. grid-gap、row-gap、column-gapを理解する

grid-gap プロパティは、grid-row-gap と grid-column-gap のショートハンド（簡略化）プロパティです。これはグリッドの行間および列間のガター（余白）のサイズを指定します。簡単に言えば、グリッドコンテナ内で各アイテムの間に生じる空白領域のことです。

• grid-gap (ショートハンド): 1つの宣言で grid-row-gap と grid-column-gap を同時に指定します。値が1つの場合は行と列の両方に適用され、2つの場合は1つ目が row gap（行間）、2つ目が column gap（列間）を表します。
• row-gap: グリッドコンテナ内の行と行の間のスペースを指定します。これはグリッドアイテムの垂直方向の距離を制御します。
• column-gap: グリッドコンテナ内の列と列の間のスペースを指定します。これはグリッドアイテムの水平方向の距離を制御します。

これらのプロパティには、任意の有効なCSSユニット（px, em, rem, vw, vh など）、パーセンテージ、または normal キーワードを使用できます。normal は間隔をゼロに設定するのと同等です。

       注意： モダンCSSでは、grid-gap、grid-row-gap、grid-column-gap は徐々により汎用的な gap、row-gap、column-gap に置き換えられており、これらは Flexbox でも同様に使用可能です。Gridコンテキストにおいては、どちらも同じ役割を果たします。

2. 基本的なコード例

これらのプロパティがどのように機能するか、いくつかの例を見ていきましょう。ここでは3行3列のグリッドコンテナを想定します。

2.1 単一値による grid-gap の指定

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 150px);
  grid-gap: 20px; /* 行と列の両方に 20px の余白を適用 */
}

この場合、グリッド内のすべての行と列の間に 20px の隙間が生まれます。

2.2 2つの値による grid-gap の指定

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 150px);
  grid-gap: 10px 30px; /* 10px の行間, 30px の列間 */
}

ここでは、垂直方向（行）には 10px、水平方向（列）には 30px の異なる余白が設定されます。

2.3 個別プロパティ（Longhand）による指定

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 150px);
  row-gap: 15px;
  column-gap: 25px;
}

これは 2.2 の例と同様の結果になります。行間に 15px、列間に 25px のスペースが確保されます。

2.4 異なるユニットの組み合わせ

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, auto);
  row-gap: 1em;   /* フォントサイズに相対的な em */
  column-gap: 2vw; /* ビューポート幅に相対的な vw */
}

row-gap に em、column-gap に vw を使用しており、レスポンシブなデザインにおいて非常に柔軟な対応が可能です。

3. 値の詳細解説

• 長さユニット (px, em, rem, vw, vh など): 固定または相対的なサイズを指定します。px は精密な制御に、em や rem はフォントサイズに基づいた柔軟な調整に適しています。vw や vh はビューポートサイズに連動するため、レスポンシブレイアウトで威力を発揮します。
• パーセンテージ (%): グリッドコンテナのサイズに対する比率で計算されます。コンテナサイズが変わると余白も変わるため、使用には注意が必要です。
• normal: デフォルト値であり、間隔はゼロになります。

4. いつどのプロパティを使うべきか

• 行と列に同じサイズの余白を設定したい場合、あるいは1行のコードで手短に済ませたい場合は grid-gap を使用します。
• 行と列で異なるサイズを精密に設定する必要がある場合は、個別の row-gap と column-gap を使用します。

5. 実戦ケースとデモ

grid-gap が実際のプロジェクトでどのように役立つかを見てみましょう。

5.1 ケース 1：フォトギャラリーレイアウト (Gallery Layout)

写真サイトなどで複数の画像を整列させ、視覚的な透明度を保つために余白を作るケースです。

<div class="gallery">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
  <img src="image4.jpg" alt="Image 4">
  <img src="image5.jpg" alt="Image 5">
  <img src="image6.jpg" alt="Image 6">
</div>

.gallery {
  display: grid;
  /* 最小 200px、最大 1fr のカラムを自動で詰め込む */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 15px; /* 画像間に 15px のガターを作成 */
}

.gallery img {
  width: 100%;
  height: auto;
  object-fit: cover; /* アスペクト比を維持してフィットさせる */
}

5.2 ケース 2：商品リストの構築 (Product Listing)

ECサイトなどで商品をグリッド形式で表示する際、アイテム間の余白はクリーンなインターフェースを作るために不可欠です。

<div class="product-listing">
  <div class="product">
    <img src="product1.jpg" alt="Product 1">
    <h3>商品名 1</h3>
    <p>商品の説明文が入ります。</p>
  </div>
  </div>

.product-listing {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px; /* アイテム間に適切な余白を作り、可読性を向上 */
}

.product {
  border: 1px solid #ccc;
  padding: 10px;
}

5.3 ケース 3：フォームレイアウトの構築 (Form Layout)

CSS Grid は複雑なフォームの構築にも適しています。一貫した余白はユーザビリティを高めます。

<form class="form-grid">
  <label for="name">名前:</label>
  <input type="text" id="name" name="name">
  
  <label for="email">メールアドレス:</label>
  <input type="email" id="email" name="email">
  
  <button type="submit">送信</button>
</form>

.form-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  row-gap: 10px;    /* フィールド間の垂直方向の余白 */
  column-gap: 20px; /* ラベルと入力欄の間の水平方向の余白 */
}

.form-grid button {
  grid-column: span 2; /* ボタンを2列分またがせる */
}