CSSのgapプロパティで要素の間隔を自在にコントロールする

CSSのgapプロパティは、FlexboxやGridレイアウトで要素間のすき間（スペース）を簡単に設定できる便利なプロパティです。
これまでのようにmarginで調整する必要がなく、レイアウトがシンプルになります。

1 gapとは？

gapは、FlexboxやGridで子要素同士の間隔を指定するためのプロパティです。
もともとはGrid専用でしたが、現在ではFlexboxでもサポートされています。

2 基本構文

.gap-grid {
  display: flex; /* または grid */
  gap: 20px; /* 要素間のすき間を20pxに */
}

3 サンプルコード

Flexboxでカードを並べる例です。

<div class="gap-grid">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
</div>

/* -------------------
 * CSSのgapプロパティ
 * ----------------- */

.gap-grid {
  display: flex; /** Flexboxレイアウト **/
  justify-content: center; /** 中央寄せ **/
  gap: 20px; /** 要素間のすき間を20pxに設定 **/
  background: #f0fff0; /** 淡いグリーン背景 **/
  padding: 30px; /** 全体の余白 **/
}

.gap-grid .item {
  background: #66bb6a; /** 緑のカード **/
  color: #fff; /** 白文字 **/
  padding: 20px 30px; /** 内側余白 **/
  border-radius: 8px; /** 角を丸く **/
  font-weight: bold; /** 太字 **/
}

4 2つの値で指定する

gapには、2つの値を設定することで縦と横のすき間を別々に指定できます。

.gap-grid {
  display: grid;
  gap: 10px 30px; /* 縦10px・横30px */
}

このように書くと、行と列で異なるスペースを設定できます。
ブログカードや画像ギャラリーなど、デザインの自由度が高まります。

5 gapを使うメリット

• marginのように端で余白を調整する必要がない
• コードがシンプルになる
• FlexboxとGridの両方で使える
• レスポンシブ対応が容易

6 注意点

古いブラウザ（特にInternet Explorer）ではgapがサポートされていません。
ただし、現在の主要ブラウザではほぼ完全に対応しています。

7 完成イメージ

8 まとめ

gapプロパティを使えば、余白を直感的にコントロールできます。
FlexboxやGridを使う際は、marginの代わりにgapを活用して、より美しい整列を実現しましょう。