CSS の gap
プロパティは、行や列の間のすき間 (溝) を定義します。これは row-gap
及び column-gap
の一括指定です。
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
CSS グリッドレイアウトでは、当初は grid-gap
プロパティを定義していました。この接頭辞付きのプロパティは gap
に置き換えられました。しかし、グリッドで grid-gap
を実装していて gap
を実装していないブラウザーに対応するため、上記のデモにあるように、接頭辞付きのプロパティを使用する必要があるでしょう。
構文
/* 単一の <length> 値 */ gap: 20px; gap: 1em; gap: 3vmin; gap: 0.5cm; /* 単一の <percentage> 値 */ gap: 16%; gap: 100%; /* 二つの <length> 値 */ gap: 20px 10px; gap: 1em 0.5em; gap: 3vmin 2vmax; gap: 0.5cm 2mm; /* 一つ又は二つの <percentage> 値 */ gap: 16% 100%; gap: 21px 82%; /* calc() 値 */ gap: calc(10% + 20px); gap: calc(20px + 10%) calc(10% - 5px); /* グローバル値 */ gap: inherit; gap: initial; gap: unset;
このプロパティは <'row-gap'>
の値と、任意で <'column-gap'>
の値を続けて指定します。 <'column-gap'>
が省略された場合、 <'row-gap'>
と同じ値が設定されます。
<'row-gap'>
及び <'column-gap'>
はそれぞれ、 <length>
又は <percentage>
で指定します。
値
<length>
- グリッド線を隔てる溝の幅です。
<percentage>
- 要素の寸法に対する、グリッド線を隔てる溝の幅です。
形式文法
<'row-gap'> <'column-gap'>?
例
フレックスレイアウト
HTML
<div id="flexbox"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div>
CSS
#flexbox { display: flex; flex-wrap: wrap; width: 300px; gap: 20px 5px; } #flexbox > div { border: 1px solid green; background-color: lime; flex: 1 1 auto; width: 100px; height: 50px; }
結果
グリッドレイアウト
HTML
<div id="grid"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div>
CSS
#grid { grid-gap: 20px 5px; }
#grid { display: grid; height: 200px; grid-template: repeat(3, 1fr) / repeat(3, 1fr); gap: 20px 5px; } #grid > div { border: 1px solid green; background-color: lime; }
結果
段組みレイアウト
HTML
<p class="content-box"> This is some multi-column text with a 40px column gap created with the CSS <code>gap</code> property. Don't you think that's fun and exciting? I sure do! </p>
CSS
.content-box { column-count: 3; gap: 40px; }
結果
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Box Alignment Module Level 3 gap の定義 |
草案 | 初回定義 |
初期値 | 一括指定の各プロパティとして
|
---|---|
適用対象 | grid containers |
継承 | なし |
メディア | 視覚 |
計算値 | 一括指定の各プロパティとして
|
アニメーションの種類 | 一括指定の各プロパティとして
|
正規順序 | 形式文法で定義される一意のあいまいでない順序 |
ブラウザーの対応
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
フレックスレイアウトでの対応
Update compatibility data on GitHub
デスクトップ | モバイル | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
基本対応 | Chrome ? | Edge ? | Firefox 完全対応 63 | IE 未対応 なし | Opera ? | Safari 未対応 なし | WebView Android ? | Chrome Android ? | Edge Mobile 未対応 なし | Firefox Android 完全対応 63 | Opera Android ? | Safari iOS 未対応 なし | Samsung Internet Android ? |
凡例
- 完全対応
- 完全対応
- 未対応
- 未対応
- 実装状況不明
- 実装状況不明
グリッドレイアウトでの対応
Update compatibility data on GitHub
デスクトップ | モバイル | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
基本対応 | Chrome
完全対応
66
| Edge
完全対応
16
| Firefox
完全対応
61
| IE 未対応 なし | Opera
完全対応
53
| Safari
完全対応
10.1
| WebView Android
完全対応
66
| Chrome Android
完全対応
66
| Edge Mobile 未対応 なし | Firefox Android
完全対応
61
| Opera Android
完全対応
53
| Safari iOS
完全対応
10.3
| Samsung Internet Android
完全対応
6.0
|
<percentage> values | Chrome 完全対応 66 | Edge 完全対応 16 | Firefox 完全対応 52 | IE 未対応 なし | Opera 完全対応 53 | Safari 未対応 なし | WebView Android 完全対応 66 | Chrome Android 完全対応 66 | Edge Mobile 未対応 なし | Firefox Android 完全対応 52 | Opera Android 完全対応 53 | Safari iOS 未対応 なし | Samsung Internet Android 未対応 なし |
calc() values | Chrome 完全対応 66 | Edge ? | Firefox 完全対応 52 | IE 未対応 なし | Opera 完全対応 53 | Safari 未対応 なし | WebView Android 完全対応 66 | Chrome Android 完全対応 66 | Edge Mobile 未対応 なし | Firefox Android 完全対応 52 | Opera Android 完全対応 53 | Safari iOS 未対応 なし | Samsung Internet Android 未対応 なし |
凡例
- 完全対応
- 完全対応
- 未対応
- 未対応
- 実装状況不明
- 実装状況不明
- 実験的。動作が変更される可能性があります。
- 実験的。動作が変更される可能性があります。
- ユーザーが明示的にこの機能を有効にしなければなりません。
- ユーザーが明示的にこの機能を有効にしなければなりません。
- 非標準の名前を使用しています。
- 非標準の名前を使用しています。
段組みレイアウトでの対応
Update compatibility data on GitHub
デスクトップ | モバイル | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
基本対応 | Chrome 完全対応 66 | Edge 完全対応 16 | Firefox 完全対応 61 | IE 未対応 なし | Opera 完全対応 53 | Safari 未対応 なし | WebView Android 完全対応 66 | Chrome Android 完全対応 66 | Edge Mobile ? | Firefox Android 完全対応 61 | Opera Android 完全対応 53 | Safari iOS 未対応 なし | Samsung Internet Android 未対応 なし |
凡例
- 完全対応
- 完全対応
- 未対応
- 未対応
- 実装状況不明
- 実装状況不明
関連情報
- 関連する CSS プロパティ:
row-gap
,column-gap
- グリッドレイアウトガイド: グリッドレイアウトの基本概念 - 溝