gap (grid-gap)
gap は CSS のプロパティで、行や列の間のすき間 (溝) を定義します。これは row-gap および column-gap の一括指定です。
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>- 要素の寸法に対する、グリッド線を隔てる溝の幅です。
形式文法
例
フレックスレイアウト
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 {
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 の定義 |
草案 | 初回定義 |
| 初期値 | 一括指定の次の各プロパティとして
|
|---|---|
| 適用対象 | 段組み要素、フレックスコンテナー、グリッドコンテナー |
| 継承 | なし |
| 計算値 | 一括指定の次の各プロパティとして
|
| アニメーションの種類 | 一括指定の次の各プロパティとして |
ブラウザーの互換性
フレックスレイアウトでの対応
BCD tables only load in the browser
グリッドレイアウトでの対応
BCD tables only load in the browser
段組みレイアウトでの対応
BCD tables only load in the browser
関連情報
- 関連する CSS プロパティ:
row-gap,column-gap - グリッドレイアウトガイド: グリッドレイアウトの基本概念 - 溝