# gap

> FlexboxやGridで要素間の間隔を指定するプロパティです。row-gap（行間）とcolumn-gap（列間）を一括で指定でき、marginより直感的で管理しやすいです。レスポンシブなレイアウトの余白調整に最適です。

- カテゴリ: スペーシング・サイズ
- URL: https://www.css-dictionary.com/property/gap/

## 構文

```css
gap: <length> | <percentage>
```

## Tailwindでは

- `gap-2` → gap: 8px
- `gap-4` → gap: 16px
- 一般形: `gap-{n}（n×4px。gap-4 = 16px）`
- 任意値: `gap-[18px]`
- 補足: 行・列を別々に指定するときは gap-x-{n} / gap-y-{n}。

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 57+ / Firefox 52+ / Safari 10.1+ / Edge 16+

## コード例

### 例1: Flexアイテム間に1remの間隔

```css
.flex-container {
  display: flex;
  gap: 1rem;
}
```

### 例2: 行間2rem、列間1remの間隔

```css
.grid-container {
  display: grid;
  gap: 2rem 1rem;
}
```

### 例3: レスポンシブな間隔設定

```css
gap: clamp(1rem, 3vw, 2rem);
```

## TIPS

marginと違って最初と最後の要素には適用されない。レスポンシブデザインに最適。

## AIがよく間違えるポイント

AIは古い知識でmargin + :last-child打ち消しや負マージンハックを提案することがありますが、flexのgapも2021年から全ブラウザ対応済みで、現在はgap一択です。gapは「アイテム間」だけに効き、外周には効かない（そこはpadding）という役割分担も明確に伝わります。

## AIへの依頼文例

- このmarginと:last-childで管理している要素間の余白をgapに置き換えてリファクタリングして

## 関連プロパティ

- [display](https://www.css-dictionary.com/property/display.md)