CSS ギャップモジュール レベル 1

1. はじめに

このセクションは規範的ではない。

CSS Multicol 1 § 4 列 ギャップと罫線では、 作者がマルチカラムコンテナー内の列間の間隔を制御し、 それらの空間に線などの可視の区切りを描画できるようにするプロパティが定義された。 これらの可視の区切りをギャップ装飾と呼ぶ。

この仕様は、以前に定義されたプロパティを拡張する。 行方向に対応する同等のプロパティを追加し、 プロパティの完全な集合を他のコンテナー型にも適用し、 ギャップ装飾をどこに、どのように描画するかについて追加の制御を与える。

1.1. 値の定義

この仕様は、[CSS2]のCSSプロパティ 定義規約に従い、 [CSS-VALUES-3]の値定義構文を使用する。 この仕様で定義されない値型は、CSS Values & Units [CSS-VALUES-3]で定義される。 他のCSSモジュールとの組み合わせにより、これらの値型の定義が拡張される場合がある。

各プロパティの定義に列挙されるプロパティ固有の値に加えて、 この仕様で定義されるすべてのプロパティは、 プロパティ値としてCSS全域キーワードも受け付ける。 読みやすさのため、それらは明示的には繰り返していない。

2. ボックス間のギャップ

marginおよびpaddingは個々のボックスの周囲の視覚的な間隔を指定するために使用できるが、 与えられたレイアウトコンテキスト内で隣接するボックスの 間の間隔を大域的に指定する方が便利な場合がある。 特に、その間隔が兄弟ボックス間と、 最初／最後のボックスとコンテナー端との間で異なる場合である。

gap プロパティ、 およびそのサブプロパティであるrow-gapとcolumn-gapは、 この機能を マルチカラム、 フレックス、 およびグリッドレイアウトに提供する。

ギャップとは、列ギャップまたは行ギャップのいずれかであり、 その定義はコンテナーの型により異なる:

マルチカラムコンテナー

列ギャップは、隣接する列ボックス間のガターである。 [CSS-MULTICOL-1]を参照。

行ギャップは、column-heightにより確立される列ボックスの行間のガターである。 [CSS-MULTICOL-2]を参照。

フレックス コンテナー

主軸に適用される場合 （たとえば、rowのフレックス コンテナーにおける列ギャップ）、 項目間のガターを指す （あたかも単一行内の隣接するフレックス項目間に、 追加の固定サイズのマージンが挿入されたかのように）。

交差軸に適用される場合 （たとえば、rowのフレックス コンテナーにおける行ギャップ）、 隣接するフレックス行間のガターを指す。

グリッド コンテナー

行ギャップおよび列ギャップは、 グリッドコンテナーのコンテキストにおいて、 それぞれグリッド 行およびグリッド列間のガターを指す。 正確な詳細については、CSS Grid Layout 1 § 10.1 ガター: row-gap、column-gap、およびgapプロパティを参照。

ガターは項目間の最小間隔として作用する: 追加の間隔はjustify-content/align-contentによって追加される場合がある。 そのような追加空間は、対応するギャップのサイズを増加させる。

いずれの場合も、ギャップは、 断片化分断と一致する場合には消滅する。[CSS-BREAK-3]

注: 表ボックスは、セル間の分離を指定するためにgapプロパティを使用しない。 代わりに、border-spacingプロパティを使用する。 これはやや異なる機能を持つ: 継承され、 さらに最外周のセルと表の境界との間の追加間隔も指定する （space-betweenというよりもspace-evenlyに近い）。

2.1. 行および列のガター: row-gapおよびcolumn-gapプロパティ

これらのプロパティは、コンテナー内の項目間に固定長のガターを指定し、 それらの間に空間を追加する。これはコンテンツ分配プロパティの space-betweenキーワードに似た方法であるが、 残り空間の割合ではなく固定サイズである。 column-gapプロパティは“列”間の間隔を指定し、 インライン軸においてコンテナー内のボックスを分離する。 これはインライン軸のマージンに似ている。 一方、row-gapは“行”間の間隔を示し、 コンテナーのブロック軸においてボックスを分離する。

値は次の意味を持つ:

<length-percentage [0,∞]>

<line-width>

適用されるレイアウトモードにより定義される行ギャップまたは列ギャップを指定する。

負の値は無効である。 パーセンテージについては、 § 2.3 gapプロパティにおけるパーセンテージを参照。

normal

normal値は、 マルチカラムコンテナーでは使用値1emを表し、 それ以外のすべてのコンテキストでは使用値0pxを表す。

2.2. gap一括指定: gapプロパティ

このプロパティは、row-gapおよびcolumn-gapを1つの宣言で設定する一括指定である。 <'column-gap'>が省略された場合、 それは<'row-gap'>と同じ値に設定される。

注: gapプロパティは、 ボックス間に作成される可視の“gutter”または“alley”の1つの構成要素にすぎない。 マージン、パディング、または分配配置の使用により、 ボックス間の可視の分離は gapで指定される値を超えて増加する場合がある。

2.3. gapプロパティにおけるパーセンテージ

一般に、 gapプロパティによって導入されるギャップは、 ギャップのサイズを持つ空の項目／トラックなどのように作用することが意図されている。 言い換えると、 作者は、追加の空の項目／トラックなどを コンテナーに挿入するだけで、gapの効果を再現できるべきである。

gapは、 常に要素のコンテンツボックスの対応するサイズを基準に パーセンテージを解決する。 このサイズが確定している場合、 挙動は明確に定義され、 レイアウトモード間で一貫している。 しかし、異なるレイアウトモードは、項目／トラックなどの循環パーセンテージサイズを異なる方法で扱うため、 gapも同様である:

グリッドレイアウトの場合

最小サイズプロパティおよびマージン／パディングの場合と同様に [CSS-SIZING-3]、 循環パーセンテージサイズは、内在サイズ寄与の決定ではゼロに対して解決されるが、 ボックスの内容をレイアウトするときは ボックスのコンテンツボックスに対して解決される。

フレックスレイアウトの場合

循環パーセンテージサイズは、すべての場合でゼロに対して解決される。

2.4. レガシーなギャッププロパティ: grid-row-gap、grid-column-gap、およびgrid-gap プロパティ

Grid Layoutモジュールは、既存のrow-gap/column-gap という命名にすべてのそのようなプロパティが統一される前に、 独自のガタープロパティの集合を持つものとして書かれていた。 レガシーコンテンツとの互換性のため、 これらのgrid接頭辞付きの名前は次のようにサポートしなければならない:

• grid-row-gapを、row-gap プロパティのレガシー名エイリアスとして

• grid-column-gapを、column-gapプロパティのレガシー名エイリアスとして

• grid-gapを、gapプロパティのレガシー名エイリアスとして

3. ギャップ装飾

ギャップは、隣接するボックス間に描画される可視の区切り（線など）であるギャップ装飾を含むことができる。

ギャップ装飾は空間を占有しない。 すなわち、ギャップ装飾の存在または幅は、 他のものの配置を変更しない。 ギャップ装飾がそのギャップより広い場合、 隣接するボックスはその装飾と重なり、 場合によっては装飾がコンテナーのボックスの外側へ延びることがある。

ギャップ装飾は、 コンテナーの境界のすぐ上に描画される。 スクロール可能なコンテナーでは、 コンテナーの境界および背景はスクロールされない一方、 装飾はコンテナー内の項目とともにスクロールする必要があることに注意。

ギャップ装飾は、 プロパティが適用されるコンテナーによって定められる"column"および"row"の定義に従う。 これらの用語の意味を決定する際、コンテナー型が書字 モードを考慮することに依存する。 例については次を参照: CSS Multicol 2 § 3 マルチカラムモデル、 CSS Flexbox 1 § 5.1 フレックス フロー方向: flex-directionプロパティ、 および CSS Grid Layout 1 § 3 グリッドレイアウト の概念と用語。

この仕様で名前が"column"で始まるプロパティは列ギャップに適用され、 名前が"row"で始まるプロパティは行ギャップに適用される。

3.1. ジオメトリ

ギャップ装飾は、 ギャップ内に、1つ以上のギャップ装飾 セグメントとして描画される。

3.1.1. セグメント端点

セグメント端点とは、 ギャップの中心線上にある点で、 ギャップ装飾 セグメントが開始または終了できる点である。 端点の型は2つある:

• 開始セグメント 端点: start側に最も近いギャップ上の点。
• 終了セグメント 端点: end側に最も近いギャップ上の点。

.grid-with-spans {
  display: grid;
  grid-template: repeat(4, 100px) / repeat(4, 100px);
  gap: 20px;
  background: rgb(255 255 128);
}
.grid > * {
  border: 1px dashed black;
}

.flex {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  width: 500px;
  background: rgb(255 255 128);
}
.flex > * {
  border: 1px dashed black;
}

.multi-column {
  column-count: 3;
  column-width: 100px;
  column-height: 50px;
  column-wrap: wrap;
  gap: 20px;
  background: rgb(255 255 128);
}

.multi-column > * {
  height: 100px;
  border: 1px dashed black;
}	

3.1.2. ギャップ装飾セグメント

定義

ギャップ装飾 セグメントは、開始セグメント端点と終了セグメント端点を組にすることにより形成される。 各ギャップは、ギャップ装飾 セグメントの集合を形成する。

このセクションでは、ギャップ装飾セグメントsを s = [s.start, s.end]として表す。 ここで、s.startはそのセグメントの開始セグメント端点であり、 s.endはそのセグメントの終了セグメント端点である。

UNION(s1, s2)は、[s1.start, s2.end]に等しいものとする。

ギャップ装飾 セグメントは、 その端点間にあるすべてのギャップ接合部について、 その接合部に寄与するすべての垂直方向のギャップをまたいで 反対側にある項目が存在する場合、スパンする項目に挟まれているという。

与えられたギャップのコンテキストにおいて、 セグメント端点の対 aおよびbは、 aからbまでの線分が、ギャップと同じ幅を持ち、 コンテナー内の子項目と交差する場合、 非連続とみなされる。

アルゴリズム

3.2. 交差点での分断挙動: column-rule-break、row-rule-break、およびrule-break プロパティ

これらのプロパティは、コンテナー内の項目によって形成される可視の“T”または“cross”交差点で、 与えられたギャップ内の装飾をセグメントへ分断する挙動を設定する。 これらの値をどのように適用するかの正確な詳細は、ギャップ装飾 セグメントを決定する手順で与えられる。

none

ギャップ装飾は、可視の“T”または“cross”交差点で開始または終了しない。 代わりに、ギャップの一端から他端まで単一の連続した装飾が描画される。

normal

挙動はコンテナーの型に依存する。

グリッドコンテナー

ギャップ装飾は可視の“T”交差点で開始および終了するが、 可視の“cross”交差点は通過して継続する。

フレックスコンテナー

noneと同じように振る舞う。

マルチカラムコンテナー

column-rule-breakでは、intersectionと同じように振る舞う。 row-rule-breakでは、noneと同じように振る舞う。

intersection

ギャップ装飾は可視の“T”および“cross”交差点で開始および終了する。

この一括指定プロパティは、column-rule-breakおよびrow-rule-breakを同じ値に設定する。

次の例は、*-rule-breakプロパティのさまざまな設定を示す。

.break-normal-grid {
  display: grid;
  grid-template: repeat(4, 100px) / repeat(4, 100px);
  gap: 20px;
  row-rule: 6px solid red;
  column-rule: 6px solid blue;
  rule-break: normal;
}

.break-none-grid {
  display: grid;
  grid-template: repeat(4, 100px) / repeat(4, 100px);
  gap: 20px;
  row-rule: 6px solid red;
  column-rule: 6px solid blue;
  rule-break: none;
}

.break-intersection-grid {
  display: grid;
  grid-template: repeat(4, 100px) / repeat(4, 100px);
  gap: 20px;
  row-rule: 6px solid red;
  column-rule: 6px solid blue;
  rule-break: intersection;
}

.break-normal-multicol {
  column-width: 150px;
  column-height: 300px;
  gap: 1em;
  row-rule: 4px solid red;
  column-rule: 4px solid blue;
  rule-break: normal;
}

.break-intersection-multicol {
  column-width: 150px;
  column-height: 300px;
  gap: 1em;
  row-rule: 4px solid red;
  column-rule: 4px solid blue;
  rule-break: intersection;
}

.break-normal-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  row-rule: 6px solid red;
  column-rule: 6px solid blue;
  rule-break: normal;
}

各フレックス行は、項目間にそれぞれ独立したギャップを持つことに注意。 これには2つの含意がある:

1. 隣接するフレックス行内のギャップ装飾は、 ギャップがたまたま整列していても互いに別個である。
2. noneは、normalと同じ視覚効果を持つ。

.break-intersection-flex {
  display: flex;
  flex-wrap: wrap;
  width: 500px;
  gap: 20px;
  row-rule: 6px solid red;
  column-rule: 6px solid blue;
  rule-break: intersection;
}

3.3. ギャップ装飾端点の調整: rule-insetプロパティ

<inset-value> = <length-percentage> | overlap-join

これらのプロパティは、通常であれば装飾の開始位置および終了位置を決定する セグメント端点に対して、 ギャップ装飾の開始点および終了点をオフセットするために使用できる。

接合セグメント 端点とは、ギャップ接合部にあるセグメント端点であり、 そこには1つ以上の他のギャップ装飾セグメントも存在する。

キャップセグメント 端点とは、接合セグメント端点ではない任意のセグメント端点である。 これにはコンテナーのコンテンツ辺にある端点、 および他のギャップ装飾セグメントが存在しないギャップ 接合部にある端点が含まれる。

.simple-grid {
  rule-break: intersection;
  rule-visibility-items: between;
}

.simple-grid-with-empty-cells {
  rule-break: intersection;
  rule-visibility-items: between;
}

.donut-grid-layout {
  rule-break: intersection;
  rule-visibility-items: between;
}

パーセンテージは、次のように定義される交差ギャップ幅を基準に解決される:

ギャップ 接合部にあるセグメント端点

交差ギャップ 幅は、セグメント端点が 位置するギャップと同じ次元における ギャップ接合部のサイズである （行ギャップでは行次元、 列 ギャップでは列次元）。

注: 通常、これは、交差または接するギャップに適用される方の column-gapまたはrow-gap プロパティの使用値に、 justify-contentまたはalign-contentによって追加された任意の追加間隔を加えたものとなる。 ただし、ギャップが重なる区間で互いに交差または接する場合、 交差ギャップ 幅は、そのような区間の和集合により決定される。 そのような場合の1つについては、この例を参照。

その他のセグメント端点

交差ギャップ 幅は0である。

注: 位置によるこの分類は、 キャップセグメント 端点／接合セグメント端点の分類とは別である。 キャップセグメント端点は、コンテナー辺またはギャップ接合部 に位置する場合がある （この例を参照）。したがって、 column-rule-inset-cap-start: 50%は、内部キャップでは ギャップ接合部の サイズの半分に解決され、コンテナー辺などその他のキャップでは0に解決される。

column-rule-inset-cap-startおよびrow-rule-inset-cap-startプロパティは、 キャップセグメント端点である開始セグメント 端点に適用される。 column-rule-inset-junction-startおよびrow-rule-inset-junction-startプロパティは、 接合セグメント 端点である開始セグメント端点に適用される。 これらのプロパティについて、正の値はギャップの軸に沿ってend方向にオフセットし、 負の値はstart方向にオフセットする。

column-rule-inset-cap-endおよびrow-rule-inset-cap-endプロパティは、 キャップセグメント端点である終了セグメント 端点に適用される。 column-rule-inset-junction-endおよびrow-rule-inset-junction-endプロパティは、 接合セグメント 端点である終了セグメント端点に適用される。 これらのプロパティについて、正の値はギャップの軸に沿ってstart方向にオフセットし、 負の値はend方向にオフセットする。

overlap-joinキーワードは、 同じギャップ接合部で出会うギャップ 装飾の間に整った接合を生成する:

• 接合セグメント端点では、ギャップ装飾は、 交差 ギャップ幅の半分に、 交差ギャップのcolumn-rule-widthまたはrow-rule-width（適用される方）の使用値の半分を加えた量だけ、 ギャップ接合部内へ延びる。
• キャップセグメント 端点では、overlap-joinは0として扱われる。

.inset-overlap-join {
  rule-inset: overlap-join;
  rule-break: intersection;
  rule-visibility-items: between;
}

.inset-overlap-join {
  rule-inset: overlap-join;
  rule-break: intersection;
  rule-visibility-items: between;
}

.inset-end {
  row-rule: 3px solid red;
  row-rule-break: intersection;
  row-rule-inset-end: 10px;
}

3.3.1. -startおよび-end一括指定

これらの一括指定により、作者は一様な非対称の装飾を実現できる。

.inset-start-8px-end-0px {
  column-rule-inset-start: 8px;
  column-rule-inset-end: 0px;
}

これらの一括指定プロパティは、対応する-cap-プロパティおよび-junction-プロパティを同じ値に設定する。 たとえば、column-rule-inset-startは、column-rule-inset-cap-startとcolumn-rule-inset-junction-startの両方を同じ 値に設定する。

この一括指定プロパティは、column-rule-inset-startおよびrow-rule-inset-startを同じ値に設定する。

この一括指定プロパティは、column-rule-inset-endおよびrow-rule-inset-endを同じ値に設定する。

3.3.2. -cap-および-junction-一括指定

これらの一括指定により、作者はキャップセグメント端点と接合 セグメント端点で異なる処理を実現できる。

.inset-cap-0px-inset-junction-negative-5px {
  column-rule-inset-cap: 0px;
  column-rule-inset-junction: -5px;
  column-rule-break: intersection;
}

これらの一括指定は、対応する-startプロパティおよび-end プロパティを設定する。 たとえば、column-rule-inset-capは、column-rule-inset-cap-startとcolumn-rule-inset-cap-endの両方を設定する。 1つの値が指定された場合、両方のプロパティがその値に設定される。 2つの値が指定された場合、-startは1番目に、-endは2番目に設定される。

この一括指定プロパティは、column-rule-inset-capおよびrow-rule-inset-capを同じ値に設定する。

この一括指定プロパティは、column-rule-inset-junctionおよびrow-rule-inset-junctionを同じ値に設定する。

3.3.3. 汎用一括指定

これらの一括指定により、作者はコンテナー全体にわたって一様な処理を実現できる。

.inset-0px {
  column-rule-inset: 0px;
  column-rule-break: intersection;
}

.inset-positive-5px {
  column-rule-inset: 5px;
  column-rule-break: intersection;
}

.inset-negative-5px {
  column-rule-inset: -5px;
  column-rule-break: intersection;
}

.inset-negative-50percent {
  column-rule-inset: -50%;
  column-rule-break: intersection;
}

これらの一括指定は、対応するキャップおよび接合の開始値と終了値を設定する。 値の順序は次のとおりである:

cap-start cap-end? [/ junction-start junction-end?]?

省略された値は、次のように補われる:

1. 接合値が省略された場合、それらはキャップ値からコピーされる。
2. 省略された終了値は、対応する開始値からコピーされる。

この一括指定プロパティは、column-rule-insetおよびrow-rule-insetを同じ値に設定する。

3.4. ギャップ装飾の可視性: rule-visibility-itemsプロパティ

これらのプロパティは、空の領域に隣接するギャップの部分で、 ギャップ装飾セグメントを描画するかどうかを制御する。

all

隣接する項目が存在するかどうかにかかわらず、すべてのギャップセグメント内に装飾を描画する。

around

2つの隣接領域の少なくとも一方が項目で占有されている場合に、ギャップセグメント内に装飾を描画する。

between

両方の隣接領域が項目で占有されている場合に、ギャップセグメント内に装飾を描画する。

normal

挙動はコンテナーの型に依存する。

グリッドコンテナー

allと同じように振る舞う。

マルチカラムコンテナー

column-rule-visibility-itemsでは、 betweenと同じように振る舞う。 row-rule-visibility-itemsでは、 allと同じように振る舞う。

この一括指定プロパティは、column-rule-visibility-itemsおよびrow-rule-visibility-itemsを同じ値に設定する。

.break-normal-with-all-grid {
  display: grid;
  grid-template: repeat(3, 100px) / repeat(3, 100px);
  gap: 20px;
  row-rule: 6px solid red;
  column-rule: 6px solid blue;
  rule-visibility-items: all;
}

.break-normal-with-around-grid {
  display: grid;
  grid-template: repeat(3, 100px) / repeat(3, 100px);
  gap: 20px;
  row-rule: 6px solid red;
  column-rule: 6px solid blue;
  rule-visibility-items: around;
}

.break-normal-with-between-grid {
  display: grid;
  grid-template: repeat(3, 100px) / repeat(3, 100px);
  gap: 20px;
  row-rule: 6px solid red;
  column-rule: 6px solid blue;
  rule-visibility-items: between;
}

3.5. ギャップ装飾の重なり: rule-overlapプロパティ

このプロパティは、重なり合うギャップ装飾の描画順を設定する。

row-over-column

行方向の装飾が列方向の装飾より上に描画される。

column-over-row

列方向の装飾が行方向の装飾より上に描画される。

.row-over-column {
  rule-overlap: row-over-column;
  row-rule: 6px solid red;
  column-rule: 6px solid blue;
}

.column-over-row {
  rule-overlap: column-over-row;
  row-rule: 6px solid red;
  column-rule: 6px solid blue;
}

3.6. 断片化

CSS Box Alignment 3 § 8.1 行および 列のガター: row-gapおよびcolumn-gapプロパティは、ギャップが断片化分断と一致する場所では消滅することを規定している。 そのような位置にはギャップが存在しないため、 ギャップ装飾もそこには描画されない。

4. 色、スタイル、および幅

この節のプロパティ定義は、 [CSS-MULTICOL-1]における同名のプロパティ定義を置き換える。

4.1. ギャップ装飾の色: column-rule-color、row-rule-color、およびrule-color プロパティ

<line-color-list>          = <line-color-or-repeat>#

<auto-line-color-list>     = <line-color-or-repeat>#? ,
                             <auto-repeat-line-color> ,
                             <line-color-or-repeat>#?

<line-color-or-repeat>     = [ <color> | <repeat-line-color> ]

<repeat-line-color>        = repeat( [ <integer [1,∞]> ] , [ <color> ]# )

<auto-repeat-line-color>   = repeat( auto , [ <color> ]# )

これらのプロパティは、ギャップ装飾の色を設定する。

この一括指定プロパティは、column-rule-colorおよびrow-rule-colorを同じ値に設定する。

4.2. ギャップ装飾のスタイル: column-rule-style、row-rule-style、およびrule-style プロパティ

<line-style-list>          = <line-style-or-repeat>#

<auto-line-style-list>     = <line-style-or-repeat>#? ,
                             <auto-repeat-line-style> ,
                             <line-style-or-repeat>#?

<line-style-or-repeat>     = [ <line-style> | <repeat-line-style> ]

<repeat-line-style>        = repeat( [ <integer [1,∞]> ] , [ <line-style> ]# )

<auto-repeat-line-style>   = repeat( auto , [ <line-style> ]# )

これらのプロパティは、ギャップ装飾のスタイルを設定する。 <line-style>値は、border-styleの場合と同じように適用される。

この一括指定プロパティは、column-rule-styleおよびrow-rule-styleを同じ値に設定する。

4.3. ギャップ装飾の幅: column-rule-width、row-rule-width、およびrule-width プロパティ

<line-width-list>          = <line-width-or-repeat>#

<auto-line-width-list>     = <line-width-or-repeat>#? ,
                             <auto-repeat-line-width> ,
                             <line-width-or-repeat>#?

<line-width-or-repeat>     = [ <line-width> | <repeat-line-width> ]

<repeat-line-width>        = repeat( [ <integer [1,∞]> ] , [ <line-width> ]# )

<auto-repeat-line-width>   = repeat( auto , [ <line-width> ]# )

これらのプロパティは、ギャップ装飾の幅を設定する。負の値は許可されない。

この一括指定プロパティは、column-rule-widthおよびrow-rule-widthを同じ値に設定する。

4.4. ギャップ装飾の一括指定: column-rule、row-rule、およびruleプロパティ

<gap-rule-list>        = <gap-rule-or-repeat>#

<gap-auto-rule-list>   = <gap-rule-or-repeat>#? ,
                         <gap-auto-repeat-rule> ,
                         <gap-rule-or-repeat>#?

<gap-rule-or-repeat>   = <gap-rule> | <gap-repeat-rule>

<gap-repeat-rule>      = repeat( <integer [1,∞]> , <gap-rule># )

<gap-auto-repeat-rule> = repeat( auto , <gap-rule># )

<gap-rule>             = <line-width> || <line-style> || <color>

これらの一括指定プロパティは、 column-rule-width、column-rule-style、およびcolumn-rule-colorプロパティ、 またはrow-rule-width、row-rule-style、およびrow-rule-colorプロパティに、それぞれ値を設定する。

この一括指定プロパティは、column-rule およびrow-ruleを同じ値に設定する。

4.5. 値のリストとrepeat()記法

この節の各プロパティは、カンマ区切りの値のリストを受け取る。 このように複数の値を設定することで、与えられたコンテナー内でギャップ装飾を変化させることができる。

column-rule-width: 1px;
column-rule-style: solid;
column-rule-color: red, blue;

そのようなリストには、repeat()記法を含めることができる。 CSS Grid Layout 1 § 7.2.3 行および列の繰り返し: repeat()記法と同様に、これらの記法により、 反復パターンを示す一連のギャップ装飾を よりコンパクトな形で記述できる。

repeat()構文の一般形は、おおよそ次のとおりである。

repeat( [ <integer [1,∞]> | auto ] , <value># )

repeat()の第1引数は、繰り返し回数を指定する。

<integer>

整数リピーターを指定する。 整数リピーターは、 第2引数の値リストへ展開され、 第1引数で指定された回数だけ繰り返される。

作者は次のように書いてもよい:

column-rule-color: gray, red, blue, red, blue, red, blue, gray;

または、同じ色の並びを生成する次の形に短縮できる:

column-rule-color: gray, repeat(3, red, blue), gray;

auto

自動リピーターを指定する。 自動リピーターは、 リストの他の部分から値を受け取らないギャップに値を埋めるために使用される。 与えられた値リスト内で、repeat()のうち 自動リピーターにできるものは高々1つである。

前の例を続けると、最終レイアウトに何列あるかを作者が知らない場合、 代わりに次のように書くことができる:

column-rule-color: gray, repeat(auto, red, blue), gray;

これは、最初と最後の列ギャップに灰色の装飾を生成し、 その間の列ギャップには赤と青が交互に現れる装飾を生成する。

repeat()の第2引数は、repeat()が現れるプロパティで受け入れられる値の、 カンマ区切りリストである。

4.6. ギャップ装飾値のギャップへの割り当て

ギャップ装飾は、割り当てられるのは、ガターの 折りたたみが適用された後である。 与えられた一組の折りたたまれたガターは、ちょうど1つのギャップ装飾を消費し、次の ギャップ装飾は 次のガター（または折りたたまれたガターの組）に適用される。 したがって、折りたたまれたガターは、装飾の目的では単一のギャップとして扱われる。

断片化のために抑制されたギャップも、 装飾がそこに描画されない場合であっても、そのパターンからギャップ装飾値を消費する。 これにより、断片化された文脈と断片化されていない文脈をまたいで、 ギャップと装飾の一貫した対応関係が維持される。

同様に、フレックスコンテナーが複数のフレックス行に折り返される場合、 装飾パターンはフレックスボックス全体にわたってギャップへ順番に割り当てられ、 各フレックス行の先頭で再開されることはない。

4.7. リスト値の補間

repeat() の値や、rule-color や rule-width などの値のリストを補間する際、補間は2段階で行われます。

1. 展開: すべての整数リピータを、その等価な値のリストへ展開します。
2. リスト補間: 展開されたリストに repeatable list 補間アルゴリズムを適用し、各アイテム同士を補間します。

@keyframes example {
  from { column-rule-width: 10px; }
  to   { column-rule-width: 20px, 40px; }
}

From:   10px, 10px
At 50%: 15px, 25px
To:     20px, 40px

@keyframes example {
  from { column-rule-width: repeat(2, 5px, 10px); }
  to   { column-rule-width: repeat(2, 15px, 20px); }
}

From:    5px, 10px,  5px, 10px
At 50%: 10px, 15px, 10px, 15px
To:     15px, 20px, 15px, 20px

@keyframes example {
  from { column-rule-width: repeat(2, 10px, 20px); }
  to   { column-rule-width: 20px; }
}

From:   10px, 20px, 10px, 20px
At 50%: 15px, 20px, 15px, 20px
To:     20px, 20px, 20px, 20px

@keyframes example {
  from { column-rule-width: repeat(2, 10px, 20px); }
  to   { column-rule-width: 20px, 30px; }
}

From:   10px, 20px, 10px, 20px
At 50%: 15px, 25px, 15px, 25px
To:     20px, 30px, 20px, 30px

@keyframes example {
  from { column-rule-width: 10px, repeat(auto, 20px), 30px }
  to   { column-rule-width: 20px, repeat(auto, 40px), 40px }
}

From:   10px, repeat(auto, 20px), 30px
At 50%: 15px, repeat(auto, 30px), 35px
To:     20px, repeat(auto, 40px), 40px

@keyframes example {
  from { column-rule-width: 10px, 20px, repeat(auto, 20px), 30px }
  to   { column-rule-width: 20px, 30px, repeat(auto, 40px, 50px), 40px }
}

From:   10px, 20px, repeat(auto, 20px, 20px), 30px
At 50%: 15px, 25px, repeat(auto, 30px, 35px), 35px
To:     20px, 30px, repeat(auto, 40px, 50px), 40px

@keyframes example {
  from { column-rule-width: 10px, repeat(auto, 20px) }
  to   { column-rule-width: 20px, 30px, repeat(auto, 40px, 50px) }
}

@keyframes example {
  from { column-rule-width: 10px, repeat(auto, 20px), 30px }
  to   { column-rule-width: 20px, repeat(auto, 40px), 40px, 50px }
}

@keyframes example {
  from { column-rule-width: 10px, repeat(auto, 20px), 30px }
  to   { column-rule-width: 20px }
}

4.8. シリアライズ

column-rule、 row-rule、 および rule の 略式プロパティは、ロングハンドプロパティが リピータ整列されている場合に限り、そのロングハンドから シリアライズされます。 ロングハンドが リピータ整列でない場合、 略式プロパティのシリアライズ結果は空文字列となります。

column-rule: 1px solid red, 2px dashed green, 3px dotted blue;

column-rule-width: 1px, 2px, 3px;
column-rule-style: solid, dashed, dotted;
column-rule-color: red, green, blue;

column-rule: 1px solid red, repeat(2, 2px dashed green);

column-rule-width: 1px, repeat(2, 2px);
column-rule-style: solid, repeat(2, dashed);
column-rule-color: red, repeat(2, green);

column-rule: repeat(auto, 1px solid red, 2px dashed green);

column-rule-width: repeat(auto, 1px, 2px);
column-rule-style: repeat(auto, solid, dashed);
column-rule-color: repeat(auto, red, green);

column-rule: repeat(auto, 1px solid red, 2px dashed green);
column-rule-width: repeat(auto, 3px, 4px, 5px);

column-rule-width: repeat(auto, 3px, 4px, 5px);
column-rule-style: repeat(auto, solid, dashed);
column-rule-color: repeat(auto, red, green);

column-rule: repeat(2, 1px solid red, 2px dashed green);
column-rule-style: dashed, dotted, solid;

column-rule-width: repeat(2, 1px, 2px);
column-rule-style: dashed, dotted, solid;
column-rule-color: repeat(2, red, green);

column-rule: repeat(2, 1px solid red, 2px dashed green);
column-rule-color: repeat(4, red, cyan);

column-rule-width: repeat(2, 1px, 2px);
column-rule-style: repeat(2, solid, dashed);
column-rule-color: repeat(4, red, cyan);

5. 謝辞

Sam Davis Omekara Jr.およびJavier Contreras Tenorioに深く感謝する。 両氏は、この仕様に対して相当量の規範的テキスト、例、およびWPTカバレッジを提供した。

Mats Palmgrenによる以前の 提案 は、Gap Decorationsに関するこの仕様の方向性を定めるうえで参考になった。

この仕様の形成に役立つ追加のフィードバックは、以下を含む多くの人々から寄せられた: Ahmad Shadeed、 Alison Maher、 Benoît Rouleau、 Elika Etemad、 Ian Kilpatrick、 Josh Tumath、 Kurt Catti-Schmidt、 Lea Verou、 Oliver Williams、 Rachel Andrew、 Sebastian Zartner、 Tab Atkins-Bittner、 およびCSSワーキンググループのメンバー。

6. プライバシーに関する考慮事項

この仕様について、新たなプライバシーに関する考慮事項は報告されていない。

7. セキュリティに関する考慮事項

この仕様について、新たなセキュリティに関する考慮事項は報告されていない。

8. 変更点

8.1. 2026年2月27日作業 草案からの変更点

• normal値を*-rule-visibility-itemsに追加し、それを新しい初期値にした。 (課題 13477)
• 書字モードおよびテキスト装飾がギャップ装飾に適用されることを明確化した。 (課題 13648、 課題 13649)
• gapプロパティを[CSS-ALIGN-3]からこの仕様へ移動した。 (課題 13089)
• edgeインセットおよびinteriorインセットを、capインセットおよびjunctionインセットに更新した。 (課題 13697)
• 断片化のために抑制されたギャップも、なおギャップ装飾値を消費することを明確化した。 (課題 13754)
• overlap-join値をrule-insetプロパティに追加した。 (課題 13137)
• 装飾パターンが各フレックス行の先頭で再開されないことを明確化した。 (課題 13663)
• 変更を反映するように概要および導入を更新した。
• 追加のWPTへのリンクを更新した。
• 謝辞の節を更新した。

8.2. 2025年4月17日作業 草案からの変更点

• トラックの折りたたみによりギャップが一致する場合の挙動を規定した。 (課題 11814)
• rule-paint-orderをrule-overlapに改名した。 (課題 12540)
• 交差点の定義を、gutterを使用するように更新した。 (課題 12084)
• 末尾のギャップ装飾割り当てが、順方向の順序で値を使用するように更新した。 (課題 12527)
• リピーターを含み得る値の補間挙動を規定した。 (課題 12431)
• column-rule-widthが、 column-rule-styleがnoneまたはhiddenの場合に算出値0を持つという 特殊ケースを削除した。 (課題 11494)
• rule-outsetプロパティをrule-insetに変更し、関連プロパティを導入した。 (課題 12603、 課題 12848、 課題 8402)
• insetプロパティの初期値を0に更新し、 autoキーワードを削除した。 (課題 13137)
• 断片化分断のためにギャップが抑制される場所ではギャップ装飾が描画されないことを明確化する段落を追加した。 (課題 11520)
• トラックの折りたたみによりギャップが一致する場合の挙動を更新した。 (課題 11814)
• 個別指定から一括指定を直列化するための節を追加した。 (課題 12201)
• 色、幅、およびスタイルの個別指定プロパティを、空白区切りリストではなく カンマ区切りリストを使用するように更新した。 (課題 12201)
• 空のグリッド領域の隣にあるギャップ装飾の節を追加した。 (課題 12602)
• 整列による空間がギャップサイズに寄与することを明確化した。 (課題 12922)
• break値spanning-itemをnormalに改名した。 (課題 13127)
• 仕様への変更を反映するように例を更新した。
• WPTスイートへのリンクを追加した。
• 謝辞の節を追加した。