Gap（gap）間隔プロパティ

最終更新：2026-09-13

gap Gap（gap）間隔プロパティ

gap プロパティはフレックスレイアウトとグリッドレイアウトにおける行と列の間隔を設定します。これは row-gap と column-gap のショートハンドです。gap はアイテム同士の間にだけ空間を追加し、コンテナの端には追加しません。そのため margin よりもすっきりとして予測しやすくなります。従来の margin ベースの間隔で必要だった最初と最後の margin の相殺処理が不要になります。

カテゴリ
初期値	normal
継承	いいえ
適用対象
アニメーションタイプ
CSS バージョン	CSS3
状態	標準

📝 構文

gap: normal | <length> | <percentage>;

⚙️ 値

値	タイプ	説明
`normal`	キーワード	既定の間隔
`<length> \| <percentage>`	タイプ	行と列の間隔

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
gap	✓ v66	✓ v16	✓ v61	✓ v10.1	✓ v53
すべての主要ブラウザーでサポート

ヒント： gap の 2 つの値は row-gap と column-gap に対応します。gap: 10px 20px は、行間が 10px、列間が 20px を意味します。1 つの値は両方に適用されます。

重要： gap が機能するのはフレックスレイアウトとグリッドレイアウトのみです。通常のブロックレイアウトでは効果がありません。ブロック要素間の間隔が必要な場合は margin を使ってください。

❓ よくある質問

Qgap と margin の違いは何ですか？

Agap はアイテム同士の間にだけ空間を作り、コンテナの端には追加しません。そのため、最初や最後の間隔を相殺する必要がありません。margin は要素の四方に空間を作るため、最初と最後の margin を特別に処理する必要があり、フレックスやグリッドのサイズ計算を妨げることもあります。内部レイアウトの間隔には gap を優先し、要素と外部との間隔には margin を使ってください。

Qgap のブラウザー対応状況はどうなっていますか？

Aフレックスレイアウトでは、gap は Chrome 84・Firefox 63・Safari 14.1 以降で完全にサポートされています。グリッドレイアウトではずっと以前（Chrome 66+・Safari 12+）からサポートされています。パーセンテージ値もサポートされ、コンテナサイズに対して解決されます。古いブラウザーに対応するには、まずフォールバックとして margin で間隔を実装し、その上で @supports (gap: 1px) の機能クエリを使って新しい構文に切り替えてください。

Qgap と grid-gap の違いは何ですか。なぜ今は gap が推奨されるのですか？

Agrid-gap は、grid-row-gap や grid-column-gap とともに、グリッドにのみ適用された初期の構文でした。その後、仕様は gap をフレックス・グリッド・マルチカラムレイアウトに拡張し、プロパティ名を変更しました。gap は現在 row-gap と column-gap のショートハンドです。これらの個別プロパティはそのまま有効で、1 方向だけに独自の値を設定したい場合に便利です。すべてのモダンブラウザーが gap をサポートしています。grid-gap は旧形式なので、新しいコードでは gap を使ってください。