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="grid"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div>
CSS
#grid {
display: grid;
height: 200px;
grid-template: repeat(3, 1fr) / repeat(3, 1fr);
gap: 20px 5px;
}
#grid > div {
background-color: lime;
}
結果
仕様書
| 仕様書 | 状態 | 備考 |
|---|---|---|
| CSS Box Alignment Module Level 3 gap の定義 |
草案 | 初回定義。 |
| 初期値 | 以下の一括指定の各プロパティとして
|
|---|---|
| 適用対象 | grid containers |
| 継承 | 不可 |
| メディア | visual |
| 計算値 | 以下の一括指定の各プロパティとして
|
| アニメーションの種類 | 以下の一括指定の各プロパティとして
|
| 正規順序 | 形式文法で定義される一意のあいまいでない順序 |
ブラウザーの対応
このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
| 機能 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| 基本対応 | 66 571 | 16 161 | 61 521 | なし | 53 441 | 10.11 |
<percentage> values | なし | 16 | 52 | なし | なし | なし |
calc() values | なし | ? | 52 | なし | なし | なし |
| 機能 | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
|---|---|---|---|---|---|---|---|
| 基本対応 | 66 571 | 66 571 | 16 161 | 61 521 | 53 441 | 10.31 | 6.01 |
<percentage> values | なし | なし | 16 | 52 | なし | なし | なし |
calc() values | なし | なし | ? | 52 | なし | なし | ? |
1. Supported as grid-gap.
2. From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
3. From version 40: this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
4. From version 28: this feature is behind the Enable experimental Web Platform features preference.
関連情報
- 関連する CSS プロパティ:
row-gap,column-gap - フレックスボックスレイアウトガイド: フレックスボックスの基本概念 - 溝
- グリッドレイアウトガイド: グリッドレイアウトの基本概念 - 溝