gap
は CSS のプロパティで、行や列の間のすき間 (溝) を定義します。これは 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>
- 要素の寸法に対する、グリッド線を隔てる溝の幅です。
形式文法
例
フレックスレイアウト
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 の定義 |
草案 | 初回定義 |
初期値 | 一括指定の各プロパティとして
|
---|---|
適用対象 | 段組み要素, フレックスコンテナー, グリッドコンテナー |
継承 | なし |
計算値 | 一括指定の各プロパティとして
|
アニメーションの種類 | 一括指定の各プロパティとして
|
ブラウザーの互換性
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
フレックスレイアウトでの対応
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
- グリッドレイアウトガイド: グリッドレイアウトの基本概念 - 溝