このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
gap
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2017年10月.
gap はCSS の一括指定プロパティで、行や列の間のすき間（溝）を設定します。このプロパティは段組み、フレックス、グリッドコンテナーに適用します。
試してみましょう
gap: 0;gap: 10%;gap: 1em;gap: 10px 20px;gap: calc(20px + 10%);<section> <div> <div> <div>One</div> <div>Two</div> <div>Three</div> <div>Four</div> <div>Five</div> </div> </div></section>#example-element { border: 1px solid #c5c5c5; display: grid; grid-template-columns: 1fr 1fr; width: 200px;}#example-element > div { background-color: rgb(0 0 255 / 0.2); border: 3px solid blue;}構成要素のプロパティ
このプロパティは以下の CSS プロパティの一括指定です。
構文
/* 単一の <length> 値 */gap: 20px;gap: 1em;gap: 3vmin;gap: 0.5cm;/* 単一の <percentage> 値 */gap: 16%;gap: 100%;/* 2 つの <length> 値 */gap: 20px 10px;gap: 1em 0.5em;gap: 3vmin 2vmax;gap: 0.5cm 2mm;/* 1 つまたは 2 つの <percentage> 値 */gap: 16% 100%;gap: 21px 82%;/* calc() 値 */gap: calc(10% + 20px);gap: calc(20px + 10%) calc(10% - 5px);/* グローバル値 */gap: inherit;gap: initial;gap: revert;gap: revert-layer;gap: unset;値
このプロパティは<'row-gap'> の値と、任意で<'column-gap'> の値を続けて指定します。<'column-gap'> が省略された場合、<'row-gap'> と同じ値が設定されます。<'row-gap'> および<'column-gap'> はそれぞれ、<length> または<percentage> で指定します。
<length><percentage>列、フレックスアイテム、フレックス行、グリッド行を区切る溝の幅を、要素の寸法に対して相対的に指定します。
解説
このプロパティは、CSS 段組みレイアウトの段間、CSS フレックスボックスレイアウトのフレックスアイテム間とフレックス行間、CSS グリッドレイアウトの行と列の間のすき間を定義します。
生成されたすき間は、空のアイテムやトラックのように、指定したサイズの幅や高さを持った空の空間を生成します。要素間の目に見える空間は指定されたgap の値とは異なるかもしれません。マージン、パディング、分配配置によって、gap が決定する値よりも要素間の間隔を広がるかもしれないからです。
グリッドレイアウトでは、最初の値は行間の溝を定義し、 2 つ目は列間の溝を定義します。グリッドレイアウトとフレックスレイアウトの両方において、 1 つの値のみが指定されている場合、その値は両方の寸法に使用されます。
フレックスコンテナーでは、最初の値がフレックスアイテム間のすき間なのか、フレックス行間のすき間なのかは、方向によって異なります。フレックスアイテムは、flex-direction プロパティの値によって行と列のどちらかにレイアウトされます。行（row （既定値）またはrow-reverse）の場合、最初の値はフレックス行間のすき間を定義し、 2 つ目の値は各行内の項目間のすき間を定義します。段組み（column またはcolumn-reverse）の場合、最初の値はフレックス行内のフレックス項目間のすき間を定義し、 2 つ目の値は各フレックス行間のすき間を定義します。
段組みコンテナーでは、最初の値で段間のすき間を定義します。column-rule-style プロパティまたはcolumn-rule 一括指定を用いることで、そうでなければ「空の空間」に区切り線を追加することができます。
パーセント値のすき間は、常にコンテナー要素のコンテンツボックスのサイズに対して計算されます。コンテナーサイズを定義している場合、この挙動はレイアウトモードによらず、明確に定義され一貫しています。これら 3 つのレイアウトモード（段組み、フレックス、グリッド）は、周期的パーセント値の扱いが異なるので、gap もそうなります。グリッドレイアウトでは、周期的パーセント値は、内在サイズの寄与を決定するためにゼロに対して解決しますが、コンテンツをレイアウトするときには要素のコンテンツボックスに対して解決します。下記 2 つの例では、明示的コンテナーサイズと暗黙的コンテナーサイズによるパーセント値によるすき間をを例の節で示します。
仕様書の初期バージョンでは、このプロパティはgrid--gap と呼ばれていました。古いウェブサイトとの互換性を維持するため、ブラウザーはgrid--gap をgap の別名として受け入れます。
公式定義
| 初期値 | 一括指定の次の各プロパティとして
|
|---|---|
| 適用対象 | 段組み要素、フレックスコンテナー、グリッドコンテナー |
| 継承 | なし |
| 計算値 | 一括指定の次の各プロパティとして
|
| アニメーションの種類 | 一括指定の次の各プロパティとして |
形式文法
gap =
<'row-gap'><'column-gap'>?
<row-gap> =
normal|
<length-percentage [0,∞]>
<column-gap> =
normal|
<length-percentage [0,∞]>
<length-percentage> =
<length>|
<percentage>
例
フレックスレイアウト
HTML
<div> <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> <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> これは CSS の <code>gap</code> プロパティで作成した、40px の列間隔を持つ段組みのテキストです。これって楽しくて期待しませんか？私はそう思います！</p>CSS
.content-box { column-count: 3; gap: 40px;}結果
パーセント値の gap 値と明示的なコンテナーサイズ
コンテナーに固定されたサイズが設定されている場合、すき間のパーセント値の計算はコンテナーのサイズに基づいて行われます。したがって、すき間の動作はすべてのレイアウトで一貫しています。次の例では、2 種類のコンテナーがあり、1 つはグリッドレイアウト、もう 1 つはフレックスレイアウトです。コンテナーには 20x20px の赤色の子が 5 つあります。どちらのコンテナーも明示的にheight: 200px を用いて高さを 200px に設定し、gap: 12.5% 0 を用いてすき間を設定します。
<span>Grid</span><div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div></div><span>Flex</span><div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div></div>body > div { background-color: #cccccc; width: 200px; flex-flow: column;}#grid { display: inline-grid; height: 200px; gap: 12.5% 0;}#flex { display: inline-flex; height: 200px; gap: 12.5% 0;}#grid > div,#flex > div { background-color: coral; width: 20px; height: 20px;}さて、ウェブ開発者ツールのインスペクタータブを使用してグリッドとフレックス要素を検査しましょう。実際のすき間を見るには、インスペクターの<div> と<div> タグにマウスを当ててください。すき間がどちらも同じ 25px であることがわかります。
パーセント値の gap 値と暗黙的なコンテナーサイズ
サイズがコンテナーに明示的に設定されていない場合、パーセント値でのすき間はグリッドレイアウトとフレックスレイアウトで異なります。次の例では、コンテナーに高さが明示的に設定されていません。
<span>Grid</span><div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div></div><span>Flex</span><div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div></div>body > div { background-color: #cccccc; width: 200px;}#grid { display: inline-grid; gap: 12.5% 0;}#flex { display: inline-flex; gap: 12.5% 0; flex-flow: column;}#grid > div,#flex > div { background-color: coral; width: 20px; height: 20px;}グリッドレイアウトの場合、パーセント値はグリッドの実際の高さに寄与しません。コンテナーの高さは0px のすき間を使用して計算されるため、実際の高さは 100px （20px × 5）となります。次に、コンテンツボックスの高さを使用してパーセント値のすき間を計算するため、実際のすき間は12.5px （100px x 12.5%）になります。すき間はレンダリングの直前に適用されます。このように、グリッドの高さは 100px のままですが、レンダリング直前にパーセント値を追加したため、オーバーフローします。
フレックスレイアウトの場合、パーセント値のすき間は常にゼロの値になります。
仕様書
| Specification |
|---|
| CSS Box Alignment Module Level 3 # gap-shorthand |