Overview.bs

<pre class='metadata'>
Title: CSS Gaps Module Level 1
Shortname: css-gaps
Level: 1
Status: ED
Prepare for TR: no
Group: csswg
Work Status: revising
Repository: w3c/csswg-drafts
URL: https://drafts.csswg.org/css-gaps-1/
TR: https://www.w3.org/TR/css-gaps-1/
Previous Version: https://www.w3.org/TR/2026/WD-css-gaps-1-20260227/
Previous Version: https://www.w3.org/TR/2025/WD-css-gaps-1-20250417/
Editor: Kevin Babbitt, Microsoft, https://github.com/kbabbitt, w3cid 124689
Abstract: This module defines properties to specify spacing ("gaps") between items in container layouts. It also introduces properties for painting visible separators within those gaps.
WPT Path Prefix: css/css-gaps/
WPT Display: open
</pre>
<pre class='anchors'>
urlPrefix: https://drafts.csswg.org/css-grid-3/; type: dfn; spec: CSS-GRID-3; text: grid lanes container
</pre>
<pre class='link-defaults'>
spec:css-backgrounds-3; type:property; text:border-style
spec:css-backgrounds-3; type:type; text:<line-style>
spec:css-backgrounds-3; type:type; text:<line-width>
spec:css-backgrounds-3; type:value; for:<line-style>; text:hidden
spec:css-backgrounds-3; type:value; for:<line-style>; text:none
spec:css-color-5; type:type; text:<color>
</pre>

<h2 id="intro">
Introduction</h2>

	<em>This section is not normative.</em>

	[[CSS-MULTICOL-1#column-gaps-and-rules]] defined properties that allow
	authors to control the spacing between columns in a [=multicol container=],
	and to paint visible separators such as lines in those spaces.
	We refer to these visible separators as [=gap decorations=].

	This specification expands upon the previously defined properties.
	It adds equivalent properties for the row direction,
	applies the full set of properties to other container types,
	and gives additional control over where and how gap decorations are painted.
	
<h3 id="values">
Value Definitions</h3>

	This specification follows the <a href="https://www.w3.org/TR/CSS2/about.html#property-defs">CSS property definition conventions</a> from [[!CSS2]]
	using the <a href="https://www.w3.org/TR/css-values-3/#value-defs">value definition syntax</a> from [[!CSS-VALUES-3]].
	Value types not defined in this specification are defined in CSS Values &amp; Units [[!CSS-VALUES-3]].
	Combination with other CSS modules may expand the definitions of these value types.

	In addition to the property-specific values listed in their definitions,
	all properties defined in this specification
	also accept the <a>CSS-wide keywords</a> as their property value.
	For readability they have not been repeated explicitly.

<!-- Big Text: Gaps

 ███▌   ███▌  ████▌   ███▌ 
█▌  █▌ ▐█ ▐█  █▌  █▌ █▌  █▌
█▌     █▌  █▌ █▌  █▌ █▌    
█▌ ██▌ █▌  █▌ ████▌   ███▌ 
█▌  █▌ █████▌ █▌         █▌
█▌  █▌ █▌  █▌ █▌     █▌  █▌
 ███▌  █▌  █▌ █▌      ███▌ 
-->

<h2 id='gaps'>
Gaps Between Boxes</h2>

	While 'margin' and 'padding' can be used to specify visual spacing around individual boxes,
	it's sometimes more convenient to globally specify spacing
	<em>between</em> adjacent boxes within a given layout context,
	particularly when the spacing is different between sibling boxes
	as opposed to between the first/last box and the container's edge.

	The 'gap' property,
	and its 'row-gap' and 'column-gap' sub-properties,
	provide this functionality for
	<a href="http://www.w3.org/TR/css3-multicol/">multi-column</a>,
	<a href="http://www.w3.org/TR/css-flexbox/">flex</a>,
	and <a href="http://www.w3.org/TR/css-grid/">grid layout</a>.

	A <dfn>gap</dfn> is either a <dfn>column gap</dfn> or <dfn>row gap</dfn>,
	whose definitions vary by type of container:

	<dl>
		<dt id="gap-multicol"><a>multi-column containers</a>
		<dd>
			A [=column gap=] is the [=gutter=] between adjacent <a>column boxes</a>,
			see [[CSS-MULTICOL-1]].

			A [=row gap=] is the [=gutter=] between the rows of [=column boxes=] established by 'column-height',
			see [[CSS-MULTICOL-2]].

		<dt id="gap-flex"><a>flex containers</a>
		<dd>
			When applied to the <a>main axis</a>
			(e.g. [=column gap=] in a ''flex-flow/row'' <a>flex container</a>),
			refers to the [=gutter=] between items
			(as if an additional fixed-size margin were inserted
			between adjacent <a>flex items</a>
			in a single line).

			When applied to the <a>cross axis</a>
			(e.g. [=row gap=] in a ''flex-flow/row'' <a>flex container</a>),
			refers to the [=gutter=] between adjacent <a>flex lines</a>.

		<dt id="gap-grid"><a>grid containers</a>
		<dd>
			[=Row gap=] and [=column gap=],
			in the context of a <a>grid container</a>,
			refer to the [=gutters=] between <a>grid rows</a> and <a>grid columns</a>,
			respectively.
			See [[css-grid-1#gutters]] for precise details.
	</dl>

	Gutters effect a minimum spacing between items:
	additional spacing may be added by 'justify-content'/'align-content'.
	Such additional space increases the size of the corresponding [=gaps=].

	In all cases, the [=gap=] disappears when it coincides with
	a [=fragmentation break=]. [[CSS-BREAK-3]]

	Note: Table boxes do not use the 'gap' properties
	to specify separation between their cells.
	Instead, they use the 'border-spacing' property,
	which has slightly different functionality:
	it inherits,
	and it also specifies the additional spacing between the outermost cells
	and the border of the table
	(similar to ''space-evenly'' rather than ''space-between'').

	<div class="example">
		<figure>
			<img alt="" src="images/multicol-gaps-2.png">
			<figcaption>
				[=Column gaps=] in orange in a multicol container with a spanner element.
				Note that [=column gaps=] break when they encounter the spanner.
			</figcaption>
		</figure>
	</div>

	<div class="example">
		<figure>
			<img alt="" src="images/multicol-gaps.png">
			<figcaption>
				Gaps in a multicol container with `column-wrap: wrap`; [=column gaps=] in orange and [=row gaps=] in blue).
				Note that [=column gaps=] in multicol containers do not overlap [=row gaps=], similar to flex.
			</figcaption>
		</figure>
	</div>

	<div class="example">
		<figure>
			<img alt="" src="images/grid-gaps.png">
			<figcaption>
				Gaps in a grid container; [=column gaps=] in orange and [=row gaps=] in blue.
				Note the shaded areas where gaps overlap.
			</figcaption>
		</figure>
	</div>

	<div class="example">
		<figure>
			<img alt="" src="images/flex-gaps.png">
			<figcaption>
				Gaps in a flex container; [=column gaps=] in orange and [=row gaps=] in blue.
				Note that, unlike in grid, gaps in flex do not overlap.
			</figcaption>
		</figure>
	</div>

<h3 id='column-row-gap'>
Row and Column Gutters: the 'row-gap' and 'column-gap' properties</h3>

	<pre class='propdef'>
	Name: row-gap, column-gap
	Value: normal | <<length-percentage [0,∞]>> | <<line-width>>
	Initial: normal
	Applies to: <a>multi-column containers</a>, <a>flex containers</a>, <a>grid containers</a>
	Inherited: no
	Percentages: see [[#gap-percent]]
	Computed value: specified keyword, else a computed <<length-percentage>> value
	Animation type: by computed value type
	</pre>

	These properties specify fixed-length <dfn export lt="gutter">gutters</dfn>
	between items in the container,
	adding space between them--
	in a manner similar to the ''justify-content/space-between'' keyword
	of the <a>content-distribution properties</a>,
	but of a fixed size instead of as a fraction of remaining space.
	The 'column-gap' property specifies spacing between “columns”,
	separating boxes in the container's <a>inline axis</a>
	similar to <a>inline-axis</a> margin;
	while 'row-gap' indicates spacing between “rows”,
	separating boxes in the container's <a>block axis</a>.

	Values have the following meanings:

	<dl dfn-type=value dfn-for="row-gap, column-gap, gap">
		: <<length-percentage [0,∞]>>
		: <<line-width>>
		::
			Specifies a [=row gap=] or [=column gap=]
			as defined by the layout modes to which it applies.

			Negative values are invalid.
			For percentages,
			see [[#gap-percent]].

		: <dfn>normal</dfn>
		:: The value ''gap/normal'' represents
			a used value of ''1em'' on <a>multi-column containers</a>,
			and a used value of ''0px'' in all other contexts.
	</dl>

<h3 id='gap-shorthand'>
Gap Shorthand: the 'gap' property</h3>

	<pre class='propdef'>
	Name: gap
	Value: <<'row-gap'>> <<'column-gap'>>?
	Initial: see individual properties
	Applies to: <a>multi-column containers</a>, <a>flex containers</a>, <a>grid containers</a>
	Inherited: no
	Percentages: refer to corresponding dimension of the content area
	Computed value: see individual properties
	Animation type: by computed value type
	</pre>

	This property is a <a>shorthand</a> that sets 'row-gap' and 'column-gap' in one declaration.
	If <<'column-gap'>> is omitted,
	it's set to the same value as <<'row-gap'>>.

	<div class='example'>
		<figure>
			<img src="images/gutters-gaps.svg" alt="A diagram showing how margins and padding add to the visible gutter size" width="500" height="616">
		</figure>

		Note: The 'gap' property is only one component of the visible “gutter” or “alley” created between boxes.
		Margins, padding, or the use of distributed alignment
		may increase the visible separation between boxes
		beyond what is specified in 'gap'.
	</div>

<h3 id='gap-percent'>
Percentages In 'gap' Properties</h3>

	In general,
	gaps introduced by the 'gap' properties
	are intended to act like an empty item/track/etc
	with the gap's size;
	in other words,
	an author should be able to reproduce the effects of 'gap'
	by just inserting additional empty items/tracks/etc
	into the container.

	'gap' always resolves percentages against
	the corresponding size of the [=content box=]
	of the element.
	When this size is definite,
	the behavior is well-defined
	and consistent across layout modes.
	But since different layout modes treat [=cyclic percentage sizes=] for items/tracks/etc differently,
	'gap' does as well:

	: In Grid Layout
	::
		<a href="https://www.w3.org/TR/css-sizing-3/#percentage-sizing">As in the min size properties and margins/paddings</a> [[CSS-SIZING-3]],
		[=cyclic percentage sizes=] resolve against zero
		for determining intrinsic size contributions,
		but resolve against the box’s content box
		when laying out the box’s contents.

	: In Flex Layout
	::
		[=Cyclic percentage sizes=] resolve against zero in all cases.

<h3 id='gap-legacy'>
Legacy Gap Properties: the 'grid-row-gap', 'grid-column-gap', and 'grid-gap' properties</h3>

	The Grid Layout module was originally written with its own set of [=gutter=] properties,
	before all such properties were unified into the existing 'row-gap'/'column-gap' naming.
	For compatibility with legacy content,
	these grid-prefixed names must be supported as follows:

	* <dfn property>grid-row-gap</dfn> as a [=legacy name alias=] of the 'row-gap' property
	* <dfn property>grid-column-gap</dfn> as a [=legacy name alias=] of the 'column-gap' property
	* <dfn property>grid-gap</dfn> as a [=legacy name alias=] of the 'gap' property

<!-- Big Text: Decorations

████▌  █████▌  ███▌   ███▌  ████▌   ███▌  █████▌ ████  ███▌  █    █▌  ███▌ 
█▌  █▌ █▌     █▌  █▌ █▌  █▌ █▌  █▌ ▐█ ▐█    █▌    ▐▌  █▌  █▌ █▌   █▌ █▌  █▌
█▌  █▌ █▌     █▌     █▌  █▌ █▌  █▌ █▌  █▌   █▌    ▐▌  █▌  █▌ ██▌  █▌ █▌    
█▌  █▌ ████   █▌     █▌  █▌ ████▌  █▌  █▌   █▌    ▐▌  █▌  █▌ █▌▐█ █▌  ███▌ 
█▌  █▌ █▌     █▌     █▌  █▌ █▌▐█   █████▌   █▌    ▐▌  █▌  █▌ █▌  ██▌     █▌
█▌  █▌ █▌     █▌  █▌ █▌  █▌ █▌ ▐█  █▌  █▌   █▌    ▐▌  █▌  █▌ █▌   █▌ █▌  █▌
████▌  █████▌  ███▌   ███▌  █▌  █▌ █▌  █▌   █▌   ████  ███▌  █▌   ▐▌  ███▌ 
-->
<h2 id="gap-decorations">
Gap decorations</h2>

	[=Gaps=] may contain a <dfn>gap decoration</dfn>,
	which is a visible separator (such as a line) painted between adjacent boxes.

	<a>Gap decorations</a> do not take up space.
	That is, the presence or width of a <a>gap decoration</a> will not alter the placement of anything else.
	If a <a>gap decoration</a> is wider than its gap,
	any adjacent boxes will overlap the decoration,
	and in some cases the decoration may extend outside the box of the container.

	<a>Gap decorations</a> are painted just above the border of the container.
	For scrollable containers,
	note that while the border and background of the container aren't scrolled,
	the decorations need to scroll along with items in the container.

	[=Gap decorations=] follow the definitions of "column" and "row" laid out by the container to which the properties are applied.
	They depend on the container type taking [=writing mode=] into account when determining the meanings of these terms.
	For examples, see:
	[[CSS-MULTICOL-2#the-multi-column-model]],
	[[CSS-FLEXBOX-1#flex-direction-property]],
	and
	[[CSS-GRID-1#grid-concepts]].

	Properties in this specification whose names begin with "column" apply to [=column gaps=],
	and properties in this specification whose names begin with "row" apply to [=row gaps=].

<!--
	<div class="example">
		<pre>
			.grid-with-spans {
			  display: grid;
			  grid-template: repeat(4, 100px) / repeat(4, 100px);
			  gap: 20px;
			  row-rule: 6px solid red;
			  column-rule: 6px solid blue;
			}
		</pre>
		<figure>
			<img alt="" src="images/example-grid-with-spans.png">
			<figcaption>A grid with spanning items and gap decorations.</figcaption>
		</figure>
	</div>

	<div class="example">
		<pre>
			.flex {
			  display: flex;
			  flex-wrap: wrap;
			  gap: 20px;
			  width: 500px;
			  row-rule: 6px solid red;
			  column-rule: 6px solid blue;
			}
		</pre>
		<figure>
			<img alt="" src="images/example-flex.png">
			<figcaption>A flexbox with gap decorations.</figcaption>
		</figure>
	</div>
-->

<!-- Big Text: Geometry

 ███▌  █████▌  ███▌  █     █ █████▌ █████▌ ████▌  █   ▐▌
█▌  █▌ █▌     █▌  █▌ ██   ██ █▌       █▌   █▌  █▌ ▐▌  █ 
█▌     █▌     █▌  █▌ █▌█ █▐█ █▌       █▌   █▌  █▌  █ ▐▌ 
█▌ ██▌ ████   █▌  █▌ █▌ █ ▐█ ████     █▌   ████▌   ▐▌█  
█▌  █▌ █▌     █▌  █▌ █▌   ▐█ █▌       █▌   █▌▐█     █▌  
█▌  █▌ █▌     █▌  █▌ █▌   ▐█ █▌       █▌   █▌ ▐█    █▌  
 ███▌  █████▌  ███▌  █▌   ▐█ █████▌   █▌   █▌  █▌   █▌  
-->

<h3 id="geometry">
Geometry</h3>

	[=Gap decorations=] are painted within a [=gap=] as one or more [=gap decoration segments=].

<h4 id="segment-endpoints">
Segment endpoints</h4>

	A <dfn>segment endpoint</dfn> is a point on a [=gap's=] centerline where a <a>gap decoration segment</a>
	may start or end.
	There are two endpoint types:
	<ul>
		<li><dfn>start segment endpoint</dfn>: Point closest to the [=start=] side of the [=gap=].
		<li><dfn>end segment endpoint</dfn>: Point closest to the [=end=] side of the [=gap=].
	</ul>

	<div algorithm="create segment endpoints">
		To <dfn>create segment endpoints</dfn> for a gap |G|:
		<ol>
			<li>Bounds of a Gap:
				<p>Create endpoints at |G|'s two bounds:
				<ul>
					<li>At the centerpoint of |G|'s start edge, create a <a>start segment endpoint</a>.
					<li>At the centerpoint of |G|'s end edge, create an <a>end segment endpoint</a>.
				</ul>
				<p class="note">When a gap runs to the content boundary, these endpoints coincide with the corresponding content edge.

			<li>Within a Gap:
				<p>A <dfn>gap junction</dfn> is a region of |G|
				where one or more [=gaps=] abut or overlap |G|.
				Two [=segment endpoints=] are created for each [=gap junction=]:
				<ul>
					<li>Entering a [=gap junction=]: At the point where a cross gap appears on at least one side of |G|, create an <a>end segment endpoint</a>.
					<li>Exiting a [=gap junction=]: At the point where no cross gap exists on either side of |G|, create a <a>start segment endpoint</a>.
				</ul>
				<p class="note">This ordering (end segment endpoint, start segment endpoint) reflects that the [=gap junction=] corresponds to
				the end of one track/item/column and the beginning of another.
		</ol>
	</div>
	The following examples illustrate the locations of <a>segment endpoints</a>,
	with a purple <span style="color:#72C">+</span> for <a> start segment endpoints</a> and a
	green <span style="color:#285">+</span> for <a> end segment endpoints</a> in each case.
	[=Gap junctions=] are shown with a dashed box.

	<div class="example">
		<pre>
			.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;
			}
		</pre>
		<figure>
			<img alt="" src="images/example-grid-segment-endpoints.png">
			<figcaption>
				Locations of <a>segment endpoints</a> and [=gap junctions=] in a grid with spanning items.
				[=Segment endpoints=] are created at the bounds of each gap (which coincide with the edges of the container),
				and within each gap in an end-start manner where the row and column gaps overlap.
			</figcaption>
		</figure>
	</div>

	<div class="example">
		<pre>
			.flex {
			  display: flex;
			  flex-wrap: wrap;
			  gap: 20px;
			  width: 500px;
			  background: rgb(255 255 128);
			}
			.flex > * {
			  border: 1px dashed black;
			}
		</pre>
		<figure>
			<img alt="" src="images/flex-and-segment-endpoints.png">
			<figcaption>Locations of <a>segment endpoints</a> and [=gap junctions=] in a flex container.
				Column gaps create endpoints at their bounds; some bounds coincide with the container edges
				(like the start of the gaps between #1 and #2, and #2 and #3 which coincide with the top edge of the container,
				and the end of the gap between #7 and #8 which coincides with the bottom edge of the container).
				Row gaps (between flex lines) create endpoints at their bounds,
				which coincide with the left and right edges of the container.
				Where column gaps abut row gaps, two endpoints are created in an end-start manner.
			</figcaption>
		</figure>
	</div>

	<div class="example">
		<pre>
			.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;
			}	
		</pre>
		<figure>
			<img alt="" src="images/multi-col-segment-endpoints.png">
			<figcaption>Locations of <a>segment endpoints</a> and [=gap junctions=] in a multi-column container.
				Column gaps (between column boxes) create endpoints at their bounds; some bounds coincide with the container edges
				(like the starts of the first 2 column gaps which coincide with the top edge,
				and the ends of the last 2 column gaps which coincide with the bottom edge).
				The row gap (between rows of column boxes) creates endpoints at its bounds,
				which coincide with the left and right edges of the container.
				Where column gaps abut the row gap, two endpoints are created in an end-start manner.
			</figcaption>
		</figure>
	</div>

<h4 id="segments">
Gap decoration segments</h4>

	<h5 class="no-toc no-num" id="segments-definitions">
	Definitions</h5>

	A <dfn>gap decoration segment</dfn> is formed by pairing a [=start segment endpoint=] with an [=end segment endpoint=].
	Each [=gap=] forms a collection of [=gap decoration segments=].

	In this section, we represent a [=gap decoration segment=] |s| as
	<code>|s| = [|s|.start, |s|.end]</code>,
	where <code>|s|.start</code> is the <a>start segment endpoint</a> of the segment,
	and <code>|s|.end</code> is the <a>end segment endpoint</a> of the segment.

	Let <dfn>UNION</dfn>(|s1|, |s2|) be equal to [|s1|.start, |s2|.end].

	A [=gap decoration segment=] is <dfn>flanked by spanning items</dfn> if, for
	every [=gap junction=] between its endpoints, there exist items on opposing sides of
	the gap that span across all perpendicular [=gaps=] contributing to that junction.

	In the context of a given [=gap=], a pair of <a>segment endpoints</a> |a| and |b| is considered <dfn>discontiguous</dfn>
	if a line segment from |a| to |b|, with the same width as the [=gap=], intersects a child item in the container.

	<h5 class="no-toc no-num" id="segments-algorithms">
	Algorithms</h5>

	<div algorithm>
		To <dfn>determine gap decoration segments</dfn> for a given [=gap=] |G|:
		<ol>
			<li>
				Let |S| be an empty list.
			</li>
			<li>
				Let |endpoints| be the result of [=creating segment endpoints=] for |G|,
				ordered by their position along |G|'s centerline from start to end.

				Note: This list is guaranteed to contain an even number of elements that strictly alternate
				between [=start segment endpoint=] and [=end segment endpoint=], beginning with a [=start segment endpoint=].
			</li>
			<li>
				If |endpoints| is empty, return |S|.
			</li>
			<li>
				Let |break| be the used value of either 'column-rule-break' or 'row-rule-break', whichever applies to the gap.
			</li>
			<li>If |break| is ''column-rule-break/none'':
				<ol>
					<li>Let |first| be the first item in |endpoints|.
					<li>Let |last| be the last item in |endpoints|.
					<li>Create a [=gap decoration segment=] |segment| = [|first|, |last|].
					<li>[=Apply offsets to a segment|Apply offsets to=] |segment|, then append it to |S|.
					<li>Return |S|.
				</ol>
			</li>

			<li><em>Empty Check:</em> If |endpoints| is empty, return |S|.

			<li>Create a [=gap decoration segment=] |s| from the first two items in |endpoints|. Remove them both from the list.

			<li>If |s|'s endpoints are <a>discontiguous</a>, go back to <em>Empty Check</em>.

			<li>While |endpoints| is not empty:
				<ol>
					<li>Create a [=gap decoration segment=] |next| from the first two items in |endpoints|, leaving them both in the list.
					<li>Let |candidate| be <a>UNION</a>(|s|, |next|).
					<li>If |candidate|'s endpoints are <a>discontiguous</a>, exit this loop.
					<li>If |break| is ''column-rule-break/intersection'' and |candidate| is not <a>flanked by spanning items</a>, exit this loop.
					<li>Remove the first two items from |endpoints|.
					<li>Set |s| to <a>UNION</a>(|s|, |next|).
				</ol>
			</li>

			<li>[=Apply offsets to a segment|Apply offsets to=] |s|, then append it to |S|.

			<li>Go back to <em>Empty Check</em>.
		</ol>
	</div>

	<div algorithm>
		To <dfn>apply offsets to a segment</dfn> |s| = [|start|, |end|]:
		<ol>
			<li>Offset |start| by the used value of the applicable [[#inset|rule-inset]] property.
			<li>Offset |end| by the used value of the applicable [[#inset|rule-inset]] property.
			<li>Update |s| with the adjusted [|start|, |end|].
		</ol>
	</div>

	<div class="example">
		<figure>
			<img alt="" src="images/grid-gap-decoration-segments.png">
			<figcaption>
				Illustration of <a>gap decoration segments</a> (blue and red rectangles) in a grid container.
				The segments are drawn between pairs of <a>segment endpoints</a>,
				with <a>start segment endpoints</a> marked with purple crosses and <a>end segment endpoints</a> marked with green crosses.
			</figcaption>
		</figure>
	</div>

	<div class="example">
		<figure>
			<img alt="" src="images/flex-gap-decoration-segments.png">
			<figcaption>
				Illustration of <a>gap decoration segments</a> (blue and red rectangles) in a flex container.
				The segments are drawn between pairs of <a>segment endpoints</a>,
				with <a>start segment endpoints</a> marked with purple crosses and <a>end segment endpoints</a> marked with green crosses.
			</figcaption>
		</figure>
	</div>

	<div class="example">
		<figure>
			<img alt="" src="images/multicol-gap-decoration-segments.png">
			<figcaption>
				Illustration of <a>gap decoration segments</a> (blue and red rectangles) in a multicol container (with column-wrap: wrap).
				The segments are drawn between pairs of <a>segment endpoints</a>,
				with <a>start segment endpoints</a> marked with purple crosses and <a>end segment endpoints</a> marked with green crosses.
			</figcaption>
		</figure>
	</div>

	<div class="example" id="example-unpaired-endpoints-1">
		<figure>
			<img alt="" src="images/flex-negative-gap-decoration-segments.png">
			<figcaption>
				Illustration of <a>gap decoration segments</a> (blue and red rectangles) in a flex container.
				The segments are drawn between pairs of <a>segment endpoints</a>,
				with <a>start segment endpoints</a> marked with purple crosses and <a>end segment endpoints</a> marked with green crosses.
			</figcaption>
		</figure>
	</div>

	<div class="example" id="example-unpaired-endpoints-2">
		<figure>
			<img alt="" src="images/flex-negative-gap-decoration-segments-example-2.png">
			<figcaption>
				Illustration of <a>gap decoration segments</a> (blue and red rectangles) in a flex container.
				The segments are drawn between pairs of <a>segment endpoints</a>,
				with <a>start segment endpoints</a> marked with purple crosses and <a>end segment endpoints</a> marked with green crosses.
			</figcaption>
		</figure>
	</div>

	<wpt>
		flex/flex-gap-decorations-001.html
		flex/flex-gap-decorations-006.html
		flex/flex-gap-decorations-007.html
		flex/flex-gap-decorations-008.html
		flex/flex-gap-decorations-015.html
		flex/flex-gap-decorations-016.html
		flex/flex-gap-decorations-020.html
		flex/flex-gap-decorations-021.html
		flex/flex-gap-decorations-022.html
		flex/flex-gap-decorations-023.html
		flex/flex-gap-decorations-024.html
		flex/flex-gap-decorations-025.html
		flex/flex-gap-decorations-026-crash.html
		flex/flex-gap-decorations-027.html
		flex/flex-gap-decorations-032.html
		flex/flex-gap-decorations-033.html
		flex/flex-gap-decorations-039.html
		flex/flex-gap-decorations-040.html
		flex/flex-gap-decorations-041.html
		flex/flex-gap-decorations-042.html
		flex/flex-gap-decorations-043.html
		flex/flex-gap-decorations-044.html
		flex/flex-gap-decorations-045.html
		flex/flex-gap-decorations-046.html
		flex/flex-gap-decorations-047.html
		flex/flex-gap-decorations-048.html
		flex/flex-gap-decorations-049.html
		flex/flex-gap-decorations-056.html
		flex/flex-gap-decorations-057.html
		flex/flex-gap-decorations-058.html
		flex/flex-gap-decorations-059.html
		flex/flex-gap-decorations-060.html
		flex/flex-gap-decorations-061.html
		flex/flex-gap-decorations-repaint-on-child-resize.html
		flex/flex-gap-decorations-writing-mode.html
		grid/grid-gap-decorations-001.html
		grid/grid-gap-decorations-029.html
		grid/grid-gap-decorations-030.html
		grid/grid-gap-decorations-031.html
		grid/grid-gap-decorations-032.html
		grid/grid-gap-decorations-033.html
		grid/grid-gap-decorations-034.html
		grid/grid-gap-decorations-035.html
		grid/grid-gap-decorations-036.html
		grid/grid-gap-decorations-037.html
		grid/grid-gap-decorations-041-crash.html
		grid/grid-gap-decorations-042.html
		grid/grid-gap-decorations-043-crash.html
		grid/grid-gap-decorations-044-crash.html
		grid/grid-gap-decorations-045.html
		grid/grid-gap-decorations-046.html
		grid/grid-gap-decorations-047.html
		grid/grid-gap-decorations-066.html
		grid/grid-gap-decorations-repaint-on-child-resize.html
		grid/grid-gap-decorations-repaint-on-item-position-change.html
		grid/grid-gap-decorations-repaint-on-item-span-change.html
		grid/grid-gap-decorations-writing-mode.html
		grid/subgrid/subgrid-gap-decorations-001.html
		grid/subgrid/subgrid-gap-decorations-002.html
		grid/subgrid/subgrid-gap-decorations-003.html
		grid/subgrid/subgrid-gap-decorations-009.html
		grid/subgrid/subgrid-gap-decorations-010.html
		grid/subgrid/subgrid-gap-decorations-011.html
		grid/subgrid/subgrid-gap-decorations-012.html
		grid/subgrid/subgrid-gap-decorations-013.html
		grid/subgrid/subgrid-gap-decorations-014.html
		grid/subgrid/subgrid-gap-decorations-015.html
		grid/subgrid/subgrid-gap-decorations-016.html
		grid/subgrid/subgrid-gap-decorations-018.html
		multicol/multicol-gap-decorations-001.html
		multicol/multicol-gap-decorations-002.html
		multicol/multicol-gap-decorations-003.html
		multicol/multicol-gap-decorations-005.html
		multicol/multicol-gap-decorations-006.html
		multicol/multicol-gap-decorations-007.html
		multicol/multicol-gap-decorations-013.html
		multicol/multicol-gap-decorations-015.html
		multicol/multicol-gap-decorations-016.html
		multicol/multicol-gap-decorations-018.html
		multicol/multicol-gap-decorations-024.html
		multicol/multicol-gap-decorations-040.html
		multicol/multicol-gap-decorations-repaint-on-content-resize.html
		multicol/multicol-gap-decorations-writing-mode.html
	</wpt>

<!-- Big Text: Breaks

████▌  ████▌  █████▌  ███▌  █▌  █▌  ███▌ 
█▌  █▌ █▌  █▌ █▌     ▐█ ▐█  █▌ █▌  █▌  █▌
█▌  █▌ █▌  █▌ █▌     █▌  █▌ █▌█▌   █▌    
█████  ████▌  ████   █▌  █▌ ██      ███▌ 
█▌  █▌ █▌▐█   █▌     █████▌ █▌█▌       █▌
█▌  █▌ █▌ ▐█  █▌     █▌  █▌ █▌ █▌  █▌  █▌
████▌  █▌  █▌ █████▌ █▌  █▌ █▌  █▌  ███▌ 
-->

<h3 id="break">
Break behaviors at intersections: The 'column-rule-break', 'row-rule-break', and 'rule-break' properties</h3>

	<pre class='propdef'>
		Name: column-rule-break, row-rule-break
		Value: ''none'' | ''normal'' | ''intersection''
		Initial: ''normal''
		Applies to: <a>grid containers</a>, <a>flex containers</a>, <a>multicol containers</a>, and <a>grid lanes containers</a>
		Inherited: no
		Animation type: discrete
	</pre>

	These properties set the behavior for breaking decorations within a given gap into segments
	at visible "T" or "cross" intersections formed by items in the container.
	Precise details for how to apply these values are given in the steps to [=determine gap decoration segments=].

	<dl dfn-type="value" dfn-for="column-rule-break, row-rule-break">
		<dt><dfn>none</dfn>
		<dd>
			Gap decorations do not start or end at visible "T" or "cross" intersections.
			Instead, a single continuous decoration is painted from one end of the gap to the other.
		</dd>
		<dt><dfn>normal</dfn>
		<dd>
			Behavior depends on the type of container.

			<dl>
				<dt><a>Grid containers</a>
				<dd>
					Gap decorations start and end at visible "T" intersections
					but continue through visible "cross" intersections.
				</dd>
				<dt><a>Flex containers</a>
				<dd>
					Behaves the same as ''column-rule-break/none''.
				</dd>
				<dt><a>Multicol containers</a>
				<dd>
					On 'column-rule-break', behaves the same as ''column-rule-break/intersection''.
					On 'row-rule-break', behaves the same as ''row-rule-break/none''.
				</dd>
			</dl>
		</dd>
		<dt><dfn>intersection</dfn>
		<dd>
			Gap decorations start and end at visible "T" and "cross" intersections.
		</dd>
	</dl>

	<wpt>
		flex/flex-gap-decorations-009.html
		flex/flex-gap-decorations-010.html
		flex/flex-gap-decorations-028.html
		flex/flex-gap-decorations-031.html
		flex/flex-gap-decorations-034.html
		flex/flex-gap-decorations-035.html
		flex/flex-gap-decorations-036.html
		flex/flex-gap-decorations-037.html
		flex/flex-gap-decorations-050.html
		flex/flex-gap-decorations-051.html
		flex/flex-gap-decorations-052.html
		grid/grid-gap-decorations-006.html
		grid/grid-gap-decorations-007.html
		grid/grid-gap-decorations-008.html
		grid/grid-gap-decorations-009.html
		grid/grid-gap-decorations-040.html
		grid/subgrid/subgrid-gap-decorations-004.html
		grid/subgrid/subgrid-gap-decorations-005.html
		grid/subgrid/subgrid-gap-decorations-006.html
		multicol/multicol-gap-decorations-014.html
		multicol/multicol-gap-decorations-020.html
		multicol/multicol-gap-decorations-025.html
		multicol/multicol-gap-decorations-026.html
		multicol/multicol-gap-decorations-034.html
	</wpt>

	<pre class='propdef shorthand'>
		Name: rule-break
		Value: <<'column-rule-break'>>
		Applies to: Same as 'column-rule-break' and 'row-rule-break'
	</pre>

	This [=shorthand property=] sets 'column-rule-break' and 'row-rule-break' to the same value.

	<wpt>
		parsing/rule-break-computed.html
		parsing/rule-break-invalid.html
		parsing/rule-break-shorthand.html
		parsing/rule-break-valid.html
	</wpt>

	The following examples illustrate various settings for the <a href="#break">*-rule-break</a> properties.

	<div class="example">
		<pre>
			.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;
			}
		</pre>
		<figure>
			<img alt="" src="images/example-break-normal-grid.png">
			<figcaption>
				Default break behavior for [=gap decorations=] in a grid.
				Each decoration stops when it encounters an item spanning across the gap.
			</figcaption>
		</figure>
	</div>

	<div class="example">
		<pre>
			.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;
			}
		</pre>
		<figure>
			<img alt="" src="images/example-break-none-grid.png">
			<figcaption>
				Grid <a>gap decorations</a> with no breaks.
				Note that the <a>gap decorations</a> extend "behind" items placed in the grid.
			</figcaption>
		</figure>
	</div>

	<div class="example">
		<pre>
			.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;
			}
		</pre>
		<figure>
			<img alt="" src="images/example-break-intersection-grid.png">
			<figcaption>
				Grid <a>gap decorations</a> contained within each [=gap decoration segment=]
				that is not flanked by spanning items on opposing sides.
			</figcaption>
		</figure>
	</div>

	<div class="example">
		<pre>
			.break-normal-multicol {
				column-width: 150px;
				column-height: 300px;
				gap: 1em;
				row-rule: 4px solid red;
				column-rule: 4px solid blue;
				rule-break: normal;
			}
		</pre>
		<figure>
			<img alt="" src="images/example-break-normal-multicol.png">
			<figcaption>
				Multicol [=gap decorations=] with rule-break set to ''column-rule-break/normal''.
				Note that in the column direction it behaves as if rule-break were set to ''intersection'',
				while in the row direction it behaves as if rule-break were set to ''none''.
			</figcaption>
		</figure>
	</div>

	<div class="example">
		<pre>
			.break-intersection-multicol {
				column-width: 150px;
				column-height: 300px;
				gap: 1em;
				row-rule: 4px solid red;
				column-rule: 4px solid blue;
				rule-break: intersection;
			}
		</pre>
		<figure>
			<img alt="" src="images/example-break-intersection-multicol.png">
			<figcaption>
				Multicol <a>gap decorations</a> with rule-break set to ''intersection''.
			</figcaption>
		</figure>
	</div>

	<div class="example">
		<pre>
			.break-normal-flex {
				display: flex;
				flex-wrap: wrap;
				gap: 20px;
				row-rule: 6px solid red;
				column-rule: 6px solid blue;
				rule-break: normal;
			}
		</pre>
		<figure>
			<img alt="" src="images/example-break-normal-flex.png">
			<figcaption>
				Default break behavior for [=gap decorations=] in a flex container.
			</figcaption>
		</figure>
		Note that each flex line has its own distinct [=gaps=] between items.
		This has two implications:
		<ol>
			<li>[=Gap decorations=] in adjacent flex lines are separate from each other even if the gaps happen to line up.
			<li>''column-rule-break/none'' would have the same visual effect as ''column-rule-break/normal''.
		</ol>
	</div>

	<div class="example">
		<pre>
			.break-intersection-flex {
				display: flex;
				flex-wrap: wrap;
				gap: 20px;
				width: 500px;
				gap: 20px;
				row-rule: 6px solid red;
				column-rule: 6px solid blue;
				rule-break: intersection;
			}
		</pre>
		<figure>
			<img alt="" src="images/example-break-intersection-flex.png">
			<figcaption>
				Flexbox <a>gap decorations</a> contained within each [=gap decoration segment=].
			</figcaption>
		</figure>
	</div>

<!-- Big Text: Insets

████ █    █▌  ███▌  █████▌ █████▌  ███▌ 
 ▐▌  █▌   █▌ █▌  █▌ █▌       █▌   █▌  █▌
 ▐▌  ██▌  █▌ █▌     █▌       █▌   █▌    
 ▐▌  █▌▐█ █▌  ███▌  ████     █▌    ███▌ 
 ▐▌  █▌  ██▌     █▌ █▌       █▌       █▌
 ▐▌  █▌   █▌ █▌  █▌ █▌       █▌   █▌  █▌
████ █▌   ▐▌  ███▌  █████▌   █▌    ███▌ 
-->

<h3 id="inset">
Adjusting gap decoration endpoints: The 'rule-inset' properties</h3>

	<pre class='propdef'>
		Name: column-rule-inset-cap-start, column-rule-inset-cap-end, column-rule-inset-junction-start, column-rule-inset-junction-end, row-rule-inset-cap-start, row-rule-inset-cap-end, row-rule-inset-junction-start, row-rule-inset-junction-end
		Value: <<inset-value>>
		Initial: ''0''
		Applies to: <a>grid containers</a>, <a>flex containers</a>, <a>multicol containers</a>, and <a>grid lanes containers</a>
		Inherited: no
		Percentages: refer to the <a>crossing gap width</a>
		Animation type: by computed value type
	</pre>

	<pre class='prod'>
		<dfn>&lt;inset-value&gt;</dfn> = <<length-percentage>> | <a value for="<inset-value>">overlap-join</a>
	</pre>

	These properties can be used to offset the start and end points of <a>gap decorations</a> relative to the
	<a>segment endpoints</a> which would normally determine where decorations start and end.

	<p>
		A <dfn>junction segment endpoint</dfn> is a [=segment endpoint=] at a [=gap junction=]
		where one or more other [=gap decoration segments=] are also present.
	</p>

	<p>
		A <dfn>cap segment endpoint</dfn> is any [=segment endpoint=] that is not a [=junction segment endpoint=].
		This includes endpoints at the container's content edges,
		as well as endpoints at a [=gap junction=] where no other [=gap decoration segment=] is present.
	</p>


	<div class="example">
		<pre>
			.simple-grid {
				rule-break: intersection;
				rule-visibility-items: between;
			}
		</pre>
		<figure>
			<img alt="" src="images/example-cap-junct-simple-grid.png">
			<figcaption>
				In a fully populated grid, every interior [=gap junction=] produces [=junction segment endpoints=] (marked <b>J</b>),
				while the container's content edges produce [=cap segment endpoints=] (marked <b>C</b>).
			</figcaption>
		</figure>
	</div>

	<div class="example">
		<pre>
			.simple-grid-with-empty-cells {
				rule-break: intersection;
				rule-visibility-items: between;
			}
		</pre>
		<figure>
			<img alt="" src="images/example-cap-junct-less-simple-grid.png">
			<figcaption>
				When a [=gap decoration segment=] terminates at an interior [=gap junction=]
				where no other [=gap decoration segment=] is present,
				its endpoint is a [=cap segment endpoint=].
			</figcaption>
		</figure>
	</div>

	<div class="example" id="example-cap-junction-donut">
		<pre>
			.donut-grid-layout {
				rule-break: intersection;
				rule-visibility-items: between;
			}
		</pre>
		<figure>
			<img alt="" src="images/example-cap-junct-donut-grid.png">
			<figcaption>
				In a "donut" grid layout, where items surround an empty space in the middle of the container,
				endpoints bordering the empty interior region are [=cap segment endpoints=].
			</figcaption>
		</figure>
	</div>

	Percentages are resolved against the <dfn>crossing gap width</dfn>, defined as follows:
	<dl>
		<dt>
			Segment endpoints at a [=gap junction=]

		<dd>
			The [=crossing gap width=] is the size of the [=gap junction=]
			in the same dimension as the [=gap=] in which the [=segment endpoint=] lies
			(the row dimension for [=row gaps=] and the column dimension for [=column gaps=]).

			Note: Typically, this will be the used value of the 'column-gap' or 'row-gap' property,
			whichever applies to the intersecting or abutting gap,
			plus any additional spacing added due to 'justify-content' or 'align-content'.
			However, in cases where [=gaps=] intersect or abut one another at overlapping intervals,
			the [=crossing gap width=] will be determined by the union of such intervals.
			See <a href="#example-unpaired-endpoints-1">this example</a> for one such case.
		<dt>
			Other segment endpoints 
		<dd>
			The [=crossing gap width=] is ''0''.
	</dl>

	<p class="note">
		Note: This classification by position is distinct from the
		[=cap segment endpoint=] / [=junction segment endpoint=] classification.
		A [=cap segment endpoint=] may sit at a container edge or at a [=gap junction=]
		(see <a href="#example-cap-junction-donut">this example</a>). Hence,
		''column-rule-inset-cap-start: 50%'' resolves to half the [=gap junction=]
		size at an interior cap and ''0'' at other caps such as container edges.
	</p>

	<p>
		The 'column-rule-inset-cap-start' and 'row-rule-inset-cap-start' properties apply to [=start segment endpoints=] that are [=cap segment endpoints=].
		The 'column-rule-inset-junction-start' and 'row-rule-inset-junction-start' properties apply to [=start segment endpoints=] that are [=junction segment endpoints=].
		For these properties, positive values offset in the [=end=] direction, and negative values offset in the [=start=] direction, along the axis of the gap.
	</p>
	<p>
		The 'column-rule-inset-cap-end' and 'row-rule-inset-cap-end' properties apply to [=end segment endpoints=] that are [=cap segment endpoints=].
		The 'column-rule-inset-junction-end' and 'row-rule-inset-junction-end' properties apply to [=end segment endpoints=] that are [=junction segment endpoints=].
		For these properties, positive values offset in the [=start=] direction, and negative values offset in the [=end=] direction, along the axis of the gap.
	</p>

	<p>
		The <dfn value for="<inset-value>">overlap-join</dfn> keyword
		produces neat joins between [=gap decorations=] that meet at the same [=gap junction=]:
	</p>

	<ul>
		<li>
			At a [=junction segment endpoint=], the [=gap decoration=] extends into the [=gap junction=]
			by half the [=crossing gap width=], plus half the [=used value=] of the crossing gap's
			'column-rule-width' or 'row-rule-width' (whichever applies).
		<li>
			At a [=cap segment endpoint=], ''<inset-value>/overlap-join'' is treated as ''0''.
	</ul>

	<div class="example">
		<pre>
			.inset-overlap-join {
				rule-inset: overlap-join;
				rule-break: intersection;
				rule-visibility-items: between;
			}
		</pre>
		<figure>
			<img alt="" src="images/example-1-overlap-join.png">
		<figcaption>
			With ''<inset-value>/overlap-join'', [=gap decorations=] at [=junction segment endpoints=]
			extend into the [=gap junction=], joining adjacent segments.
			At [=cap segment endpoints=], ''<inset-value>/overlap-join'' is treated as ''0''.
		</figcaption>
		</figure>
	</div>

	<div class="example">
		<pre>
			.inset-overlap-join {
				rule-inset: overlap-join;
				rule-break: intersection;
				rule-visibility-items: between;
			}
		</pre>
		<figure>
			<img alt="" src="images/example-2-overlap-join.png">
		<figcaption>
			In a "donut" grid layout, where items surround an empty space in the middle of the container,
			''<inset-value>/overlap-join'' joins adjacent segments
			at the [=junction segment endpoints=],
			extending each [=gap decoration=] into the [=gap junction=]. At the [=cap segment endpoints=]
			bordering the edge of the container and the empty interior region, ''<inset-value>/overlap-join'' is treated as ''0''.
		</figcaption>
		</figure>
	</div>

	<div class="example">
		<pre>
			.inset-end {
				row-rule: 3px solid red;
				row-rule-break: intersection;
				row-rule-inset-end: 10px;
			}
		</pre>
		<figure>
			<img alt="" src="images/example-inset-direction.png">
			<figcaption>
				Row-direction decorations with asymmetric insets
				in LTR and RTL directions and vertical writing-mode.
			</figcaption>
		</figure>
	</div>

	<wpt>
		flex/flex-gap-decorations-011.html
		flex/flex-gap-decorations-013.html
		flex/flex-gap-decorations-014.html
		flex/flex-gap-decorations-029.html
		flex/flex-gap-decorations-030.html
		flex/flex-gap-decorations-053.html
		flex/flex-gap-decorations-054.html
		flex/flex-gap-decorations-055.html
		flex/flex-gap-decorations-063.html
		flex/flex-gap-decorations-064.html
		flex/flex-gap-decorations-065.html
		flex/flex-gap-decorations-066.html
		flex/flex-gap-decorations-067.html
		flex/flex-gap-decorations-direction-inset.html
		grid/grid-gap-decorations-010.html
		grid/grid-gap-decorations-011.html
		grid/grid-gap-decorations-012.html
		grid/grid-gap-decorations-013.html
		grid/grid-gap-decorations-014.html
		grid/grid-gap-decorations-015.html
		grid/grid-gap-decorations-038.html
		grid/grid-gap-decorations-052.html
		grid/grid-gap-decorations-053.html
		grid/grid-gap-decorations-067.html
		grid/grid-gap-decorations-068.html
		grid/grid-gap-decorations-069.html
		grid/grid-gap-decorations-070.html
		grid/grid-gap-decorations-071.html
		grid/grid-gap-decorations-072.html
		grid/grid-gap-decorations-073.html
		grid/grid-gap-decorations-074.html
		grid/grid-gap-decorations-075.html
		grid/grid-gap-decorations-076.html
		grid/grid-gap-decorations-077.html
		grid/grid-gap-decorations-078.html
		grid/grid-gap-decorations-079.html
		grid/grid-gap-decorations-080.html
		grid/grid-gap-decorations-081.html
		grid/grid-gap-decorations-082.html
		grid/grid-gap-decorations-090.html
		grid/grid-gap-decorations-091.html
		grid/grid-gap-decorations-092.html
		grid/grid-gap-decorations-direction-inset.html
		grid/subgrid/subgrid-gap-decorations-007.html
		grid/subgrid/subgrid-gap-decorations-008.html
		multicol/multicol-gap-decorations-008.html
		multicol/multicol-gap-decorations-009.html
		multicol/multicol-gap-decorations-010.html
		multicol/multicol-gap-decorations-011.html
		multicol/multicol-gap-decorations-012.html
		multicol/multicol-gap-decorations-017.html
		multicol/multicol-gap-decorations-022.html
		multicol/multicol-gap-decorations-023.html
		multicol/multicol-gap-decorations-033.html
		multicol/multicol-gap-decorations-036.html
		multicol/multicol-gap-decorations-037.html
		multicol/multicol-gap-decorations-038.html
		multicol/multicol-gap-decorations-039.html
		multicol/multicol-gap-decorations-direction-inset.html
		parsing/rule-inset-cap-start-end-computed.html
		parsing/rule-inset-cap-start-end-invalid.html
		parsing/rule-inset-junction-start-end-computed.html
		parsing/rule-inset-junction-start-end-invalid.html
	</wpt>

	<h4 id="insets-start-end">
	''-start'' and ''-end'' shorthands</h4>

	These shorthands allow authors to achieve uniform asymmetric decorations.

	<div class="example">
		<pre>
			.inset-start-8px-end-0px {
				column-rule-inset-start: 8px;
				column-rule-inset-end: 0px;
			}
		</pre>
		<figure>
			<img alt="" src="images/example-column-inset-start-end.png">
			<figcaption>
				A start inset of ''8px'' recedes the starts of [=gap decorations=],
				while an end inset of ''0px'' aligns the ends of [=gap decorations=] with content edges.
			</figcaption>
		</figure>
	</div>

	<pre class='propdef shorthand'>
		Name: column-rule-inset-start, column-rule-inset-end, row-rule-inset-start, row-rule-inset-end
		Value: <<inset-value>>
		Applies to: Same as 'column-rule-inset-cap-start', 'column-rule-inset-junction-start', 'column-rule-inset-cap-end', 'column-rule-inset-junction-end', 'row-rule-inset-cap-start', 'row-rule-inset-junction-start', 'row-rule-inset-cap-end', and 'row-rule-inset-junction-end'
	</pre>

	These [=shorthand properties=] set the corresponding ''-cap-'' and ''-junction-'' properties to the same value.
	For example, 'column-rule-inset-start' sets both 'column-rule-inset-cap-start' and 'column-rule-inset-junction-start' to the same value.

	<pre class='propdef shorthand'>
		Name: rule-inset-start
		Value: <<'column-rule-inset-start'>>
		Applies to: Same as 'column-rule-inset-start' and 'row-rule-inset-start'
	</pre>

	This [=shorthand property=] sets 'column-rule-inset-start' and 'row-rule-inset-start' to the same value.

	<pre class='propdef shorthand'>
		Name: rule-inset-end
		Value: <<'column-rule-inset-end'>>
		Applies to: Same as 'column-rule-inset-end' and 'row-rule-inset-end'
	</pre>

	This [=shorthand property=] sets 'column-rule-inset-end' and 'row-rule-inset-end' to the same value.

	<wpt>
		parsing/rule-inset-start-end-bidirectional-shorthand.html
		parsing/rule-inset-start-end-computed.html
		parsing/rule-inset-start-end-invalid.html
		parsing/rule-inset-start-end-shorthand.html
		parsing/rule-inset-start-end-valid.html
	</wpt>

	<h4 id="insets-cap-junction">
	''-cap-'' and ''-junction-'' shorthands</h4>

	These shorthands allow authors to achieve different treatments at [=cap segment endpoints=] versus [=junction segment endpoints=].

	<div class="example">
		<pre>
			.inset-cap-0px-inset-junction-negative-5px {
				column-rule-inset-cap: 0px;
				column-rule-inset-junction: -5px;
				column-rule-break: intersection;
			}
		</pre>
		<figure>
			<img alt="" src="images/example-column-inset-junction-5px.png">
			<figcaption>
				A junction inset of ''-5px'' extends the endpoints of <a>gap decorations</a> at [=junction segment endpoints=]
				slightly beyond the edges of adjacent items. A cap inset of ''0px'' aligns the endpoints of <a>gap decorations</a>
				at [=cap segment endpoints=] with the content edges.
			</figcaption>
		</figure>
	</div>

	<pre class='propdef shorthand'>
		Name: column-rule-inset-cap, column-rule-inset-junction, row-rule-inset-cap, row-rule-inset-junction
		Value: <<inset-value>> <<inset-value>>?
		Applies to: Same as 'column-rule-inset-cap-start', 'column-rule-inset-cap-end', 'column-rule-inset-junction-start', 'column-rule-inset-junction-end', 'row-rule-inset-cap-start', 'row-rule-inset-cap-end', 'row-rule-inset-junction-start', and 'row-rule-inset-junction-end'
	</pre>

	These shorthands set the corresponding ''-start'' and ''-end'' properties.
	For example, 'column-rule-inset-cap' sets both 'column-rule-inset-cap-start' and 'column-rule-inset-cap-end'.
	If one value is specified, both properties are set to that value.
	If two values are specified, ''-start'' is set to the first and ''-end'' is set to the second.

	<pre class='propdef shorthand'>
		Name: rule-inset-cap
		Value: <<'column-rule-inset-cap'>>
		Applies to: Same as 'column-rule-inset-cap' and 'row-rule-inset-cap'
	</pre>

	This [=shorthand property=] sets 'column-rule-inset-cap' and 'row-rule-inset-cap' to the same value.

	<pre class='propdef shorthand'>
		Name: rule-inset-junction
		Value: <<'column-rule-inset-junction'>>
		Applies to: Same as 'column-rule-inset-junction' and 'row-rule-inset-junction'
	</pre>

	This [=shorthand property=] sets 'column-rule-inset-junction' and 'row-rule-inset-junction' to the same value.

	<wpt>
		parsing/rule-inset-cap-bidirectional-shorthand.html
		parsing/rule-inset-cap-junction-computed.html
		parsing/rule-inset-cap-junction-invalid.html
		parsing/rule-inset-cap-junction-shorthand.html
		parsing/rule-inset-cap-junction-valid.html
		parsing/rule-inset-junction-bidirectional-shorthand.html
	</wpt>

	<h4 id="insets-universal">
	Universal shorthands</h4>

	These shorthands allow authors to achieve uniform treatments throughout a container.

	<div class="example">
		<pre>
			.inset-0px {
				column-rule-inset: 0px;
				column-rule-break: intersection;
			}
		</pre>
		<figure>
			<img alt="" src="images/example-column-inset-0px.png">
			<figcaption>
				An inset of ''0px'' aligns the ends of <a>gap decorations</a> with adjacent items.
			</figcaption>
		</figure>
	</div>

	<div class="example">
		<pre>
			.inset-positive-5px {
				column-rule-inset: 5px;
				column-rule-break: intersection;
			}
		</pre>
		<figure>
			<img alt="" src="images/example-column-inset-5px.png">
			<figcaption>
				An inset of ''5px'' shortens the ends of <a>gap decorations</a>
				relative to the edges of adjacent items.
			</figcaption>
		</figure>
	</div>

	<div class="example">
		<pre>
			.inset-negative-5px {
				column-rule-inset: -5px;
				column-rule-break: intersection;
			}
		</pre>
		<figure>
			<img alt="" src="images/example-column-inset-minus-5px.png">
			<figcaption>
				An inset of ''-5px'' extends the ends of <a>gap decorations</a>
				slightly beyond the edges of adjacent items.
			</figcaption>
		</figure>
	</div>

	<div class="example">
		<pre>
			.inset-negative-50percent {
				column-rule-inset: -50%;
				column-rule-break: intersection;
			}
		</pre>
		<figure>
			<img alt="" src="images/example-column-inset-50percent.png">
		<figcaption>
			An inset of ''-50%'' extends each end of a <a>gap decoration</a>
			halfway into its intersection.
			Neighboring <a>gap decorations</a> "meet in the middle" to create a continuous line.
			Note that at the edges of the container, the <a>crossing gap width</a> is defined to be ''0'',
			so the inset value of ''-50%'' resolves to ''0''
			and thus the <a>gap decoration</a> does not extend beyond the bounds of the container.
			(Contrast with the previous example, which specified an inset in ''px'' units.)
		</figcaption>
		</figure>
	</div>

	<pre class='propdef shorthand'>
		Name: column-rule-inset, row-rule-inset
		Value: <<'column-rule-inset-cap'>> [ / <<'column-rule-inset-junction'>> ]?
		Applies to: Same as 'column-rule-inset-cap', 'column-rule-inset-junction', 'row-rule-inset-cap', and 'row-rule-inset-junction'
	</pre>

	These shorthands set the corresponding cap and junction start and end values.
	The order of values is:
	<pre class='prod'>
		cap-start cap-end? [/ junction-start junction-end?]?
	</pre>

	Omitted values are filled in as follows:
	<ol>
		<li>If the junction values are omitted, they are copied from the cap values.
		<li>Any omitted end value is copied from the corresponding start value.
	</ol>

	<pre class='propdef shorthand'>
		Name: rule-inset
		Value: <<'column-rule-inset'>>
		Applies to: Same as 'column-rule-inset' and 'row-rule-inset'
	</pre>

	This [=shorthand property=] sets 'column-rule-inset' and 'row-rule-inset' to the same value.

	<wpt>
		parsing/rule-inset-bidirectional-shorthand.html
		parsing/rule-inset-computed.html
		parsing/rule-inset-invalid.html
		parsing/rule-inset-shorthand.html
		parsing/rule-inset-valid.html
	</wpt>

<!-- Big Text: Visibility

█▌   █▌ ████  ███▌  ████ ████▌  ████ █▌    ████ █████▌ █   ▐▌
█▌   █▌  ▐▌  █▌  █▌  ▐▌  █▌  █▌  ▐▌  █▌     ▐▌    █▌   ▐▌  █ 
█▌   █▌  ▐▌  █▌      ▐▌  █▌  █▌  ▐▌  █▌     ▐▌    █▌    █ ▐▌ 
▐▌   █   ▐▌   ███▌   ▐▌  █████   ▐▌  █▌     ▐▌    █▌    ▐▌█  
 █  ▐▌   ▐▌      █▌  ▐▌  █▌  █▌  ▐▌  █▌     ▐▌    █▌     █▌  
 ▐▌ █    ▐▌  █▌  █▌  ▐▌  █▌  █▌  ▐▌  █▌     ▐▌    █▌     █▌  
  ▐█    ████  ███▌  ████ ████▌  ████ █████ ████   █▌     █▌  
-->
<h3 id="visibility">
Gap decoration visibility: The 'rule-visibility-items' properties</h3>
	<pre class='propdef'>
		Name: column-rule-visibility-items, row-rule-visibility-items
		Value: ''all'' | ''around'' | ''between'' | ''normal''
		Initial: ''normal''
		Applies to: [=grid containers=] and [=multicol containers=]
		Inherited: no
		Computed value: as specified
		Animation type: discrete
	</pre>

	These properties control whether a [=gap decoration segment=] is painted
	in portions of [=gaps=] adjacent to empty areas.

	<dl dfn-type="value" dfn-for="column-rule-visibility-items, row-rule-visibility-items">
		<dt><dfn>all</dfn>
		<dd>Paint decorations in all gap segments, regardless of whether adjacent items are present.
		<dt><dfn>around</dfn>
		<dd>Paint decorations in a gap segment if at least one of the two adjacent areas is occupied by an item.
		<dt><dfn>between</dfn>
		<dd>Paint decorations in a gap segment if both adjacent areas are occupied by items.
		<dt><dfn>normal</dfn>
		<dd>Behavior depends on the type of container.
			<dl>
				<dt>[=Grid containers=]
				<dd>
					Behaves the same as ''all''.
				</dd>
				<dt>[=Multicol containers=]
				<dd>
					On 'column-rule-visibility-items', behaves the same as ''column-rule-visibility-items/between''.
					On 'row-rule-visibility-items', behaves the same as ''row-rule-visibility-items/all''.
				</dd>
			</dl>
		</dd>
	</dl>

	<pre class='propdef shorthand'>
		Name: rule-visibility-items
		Value: <<'column-rule-visibility-items'>>
		Applies to: Same as 'column-rule-visibility-items' and 'row-rule-visibility-items'
	</pre>

	This [=shorthand property=] sets 'column-rule-visibility-items' and 'row-rule-visibility-items' to the same value.

	<div class="example">
		<pre>
			.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;
			}
		</pre>
		<figure>
			<img alt="" src="images/example-visibility-all-normal.png">
			<figcaption>
				Gap decorations in Grid with ''column-rule-break/normal'' rule breaking and ''column-rule-visibility-items/all'' visibility.
			</figcaption>
		</figure>
	</div>
	
	<div class="example">
		<pre>
			.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;
			}
		</pre>
		<figure>
			<img alt="" src="images/example-visibility-around-normal.png">
			<figcaption>
				Gap decorations in Grid with ''column-rule-break/normal'' rule breaking and ''column-rule-visibility-items/around'' visibility.
			</figcaption>
		</figure>
	</div>
	
	<div class="example">
		<pre>
			.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;
			}
		</pre>
		<figure>
			<img alt="" src="images/example-visibility-between-normal.png">
			<figcaption>
				Gap decorations in Grid with ''column-rule-break/normal'' rule breaking and ''column-rule-visibility-items/between'' visibility.
			</figcaption>
		</figure>
	</div>

	<wpt>
		grid/fragmentation/grid-gap-decorations-fragmentation-025.html
		grid/fragmentation/grid-gap-decorations-fragmentation-026.html
		grid/fragmentation/grid-gap-decorations-fragmentation-027.html
		grid/grid-gap-decorations-054.html
		grid/grid-gap-decorations-055.html
		grid/grid-gap-decorations-056.html
		grid/grid-gap-decorations-057.html
		grid/grid-gap-decorations-064.html
		grid/grid-gap-decorations-065.html
		grid/subgrid/subgrid-gap-decorations-019.html
		grid/subgrid/subgrid-gap-decorations-020.html
		grid/subgrid/subgrid-gap-decorations-021.html
		grid/subgrid/subgrid-gap-decorations-022.html
		grid/subgrid/subgrid-gap-decorations-023.html
		grid/subgrid/subgrid-gap-decorations-024.html
		grid/subgrid/subgrid-gap-decorations-025.html
		multicol/multicol-gap-decorations-027.html
		multicol/multicol-gap-decorations-028.html
		multicol/multicol-gap-decorations-029.html
		multicol/multicol-gap-decorations-030.html
		multicol/multicol-gap-decorations-031.html
		multicol/multicol-gap-decorations-032.html
		multicol/multicol-gap-decorations-035.html
		parsing/rule-visibility-items-computed.html
		parsing/rule-visibility-items-invalid.html
		parsing/rule-visibility-items-shorthand.html
		parsing/rule-visibility-items-valid.html
	</wpt>

<!-- Big Text: Overlap

 ███▌  █▌   █▌ █████▌ ████▌  █▌     ███▌  ████▌ 
█▌  █▌ █▌   █▌ █▌     █▌  █▌ █▌    ▐█ ▐█  █▌  █▌
█▌  █▌ █▌   █▌ █▌     █▌  █▌ █▌    █▌  █▌ █▌  █▌
█▌  █▌ ▐▌   █  ████   ████▌  █▌    █▌  █▌ ████▌ 
█▌  █▌  █  ▐▌  █▌     █▌▐█   █▌    █████▌ █▌    
█▌  █▌  ▐▌ █   █▌     █▌ ▐█  █▌    █▌  █▌ █▌    
 ███▌    ▐█    █████▌ █▌  █▌ █████ █▌  █▌ █▌    
-->

<h3 id="overlap">
Gap decoration overlap: The 'rule-overlap' property</h3>

	<pre class='propdef'>
		Name: rule-overlap
		Value: ''row-over-column'' | ''column-over-row''
		Initial: ''row-over-column''
		Applies to: <a>grid containers</a>, <a>flex containers</a>, and <a>grid lanes containers</a>
		Inherited: no
		Animation type: discrete
	</pre>

	This property sets the paint order for overlapping <a>gap decorations</a>.

	<dl dfn-type="value" dfn-for="rule-overlap">
		<dt><dfn>row-over-column</dfn>
		<dd>Row-direction decorations are painted above column-direction decorations.
		<dt><dfn>column-over-row</dfn>
		<dd>Column-direction decorations are painted above row-direction decorations.
	</dl>

	<div class="example">
		<pre>
			.row-over-column {
				rule-overlap: row-over-column;
				row-rule: 6px solid red;
				column-rule: 6px solid blue;
			}
		</pre>
		<figure>
			<img alt="" src="images/example-row-over-column.png">
			<figcaption>
				Row-over-column gap decoration overlap.
			</figcaption>
		</figure>
	</div>

	<div class="example">
		<pre>
			.column-over-row {
				rule-overlap: column-over-row;
				row-rule: 6px solid red;
				column-rule: 6px solid blue;
			}
		</pre>
		<figure>
			<img alt="" src="images/example-column-over-row.png">
			<figcaption>
				Column-over-row gap decoration overlap.
			</figcaption>
		</figure>
	</div>

	<wpt>
		flex/flex-gap-decorations-012.html
		grid/grid-gap-decorations-023.html
		grid/subgrid/subgrid-gap-decorations-017.html
		parsing/rule-overlap-computed.html
		parsing/rule-overlap-invalid.html
		parsing/rule-overlap-valid.html
	</wpt>

<!-- Big Text: Fragmentation 

█████▌ ████▌   ███▌   ███▌  █     █ █████▌ █    █▌ █████▌  ███▌  █████▌ ████  ███▌  █    █▌
█▌     █▌  █▌ ▐█ ▐█  █▌  █▌ ██   ██ █▌     █▌   █▌   █▌   ▐█ ▐█    █▌    ▐▌  █▌  █▌ █▌   █▌
█▌     █▌  █▌ █▌  █▌ █▌     █▌█ █▐█ █▌     ██▌  █▌   █▌   █▌  █▌   █▌    ▐▌  █▌  █▌ ██▌  █▌
████   ████▌  █▌  █▌ █▌ ██▌ █▌ █ ▐█ ████   █▌▐█ █▌   █▌   █▌  █▌   █▌    ▐▌  █▌  █▌ █▌▐█ █▌
█▌     █▌▐█   █████▌ █▌  █▌ █▌   ▐█ █▌     █▌  ██▌   █▌   █████▌   █▌    ▐▌  █▌  █▌ █▌  ██▌
█▌     █▌ ▐█  █▌  █▌ █▌  █▌ █▌   ▐█ █▌     █▌   █▌   █▌   █▌  █▌   █▌    ▐▌  █▌  █▌ █▌   █▌
█▌     █▌  █▌ █▌  █▌  ███▌  █▌   ▐█ █████▌ █▌   ▐▌   █▌   █▌  █▌   █▌   ████  ███▌  █▌   ▐▌
-->

<h3 id="fragmentation">
Fragmentation</h3>

	[[css-align-3#column-row-gap]] specifies that gaps disappear
	where they coincide with a [=fragmentation break=].
	Because there is no gap in such locations,
	no [=gap decoration=] is drawn in them either.

	<wpt>
		flex/fragmentation/flex-gap-decorations-fragmentation-001.html
		flex/fragmentation/flex-gap-decorations-fragmentation-002.html
		flex/fragmentation/flex-gap-decorations-fragmentation-003.html
		flex/fragmentation/flex-gap-decorations-fragmentation-004.html
		flex/fragmentation/flex-gap-decorations-fragmentation-005.html
		flex/fragmentation/flex-gap-decorations-fragmentation-006.html
		flex/fragmentation/flex-gap-decorations-fragmentation-007.html
		flex/fragmentation/flex-gap-decorations-fragmentation-008.html
		flex/fragmentation/flex-gap-decorations-fragmentation-009.html
		flex/fragmentation/flex-gap-decorations-fragmentation-010.html
		flex/fragmentation/flex-gap-decorations-fragmentation-011.html
		flex/fragmentation/flex-gap-decorations-fragmentation-012.html
		flex/fragmentation/flex-gap-decorations-fragmentation-013.html
		flex/fragmentation/flex-gap-decorations-fragmentation-014.html
		flex/fragmentation/flex-gap-decorations-fragmentation-015.html
		flex/fragmentation/flex-gap-decorations-fragmentation-016.html
		flex/fragmentation/flex-gap-decorations-fragmentation-017.html
		flex/fragmentation/flex-gap-decorations-fragmentation-018.html
		flex/fragmentation/flex-gap-decorations-fragmentation-019.html
		flex/fragmentation/flex-gap-decorations-fragmentation-020.html
		flex/fragmentation/flex-gap-decorations-fragmentation-021.html
		flex/fragmentation/flex-gap-decorations-fragmentation-022-crash.html
		flex/fragmentation/flex-gap-decorations-fragmentation-026.html
		grid/fragmentation/grid-gap-decorations-fragmentation-001.html
		grid/fragmentation/grid-gap-decorations-fragmentation-002.html
		grid/fragmentation/grid-gap-decorations-fragmentation-003.html
		grid/fragmentation/grid-gap-decorations-fragmentation-004.html
		grid/fragmentation/grid-gap-decorations-fragmentation-005.html
		grid/fragmentation/grid-gap-decorations-fragmentation-006.html
		grid/fragmentation/grid-gap-decorations-fragmentation-007.html
		grid/fragmentation/grid-gap-decorations-fragmentation-008.html
		grid/fragmentation/grid-gap-decorations-fragmentation-009.html
		grid/fragmentation/grid-gap-decorations-fragmentation-010.html
		grid/fragmentation/grid-gap-decorations-fragmentation-011.html
		grid/fragmentation/grid-gap-decorations-fragmentation-012.html
		grid/fragmentation/grid-gap-decorations-fragmentation-013.html
		grid/fragmentation/grid-gap-decorations-fragmentation-014.html
		grid/fragmentation/grid-gap-decorations-fragmentation-015.html
		grid/fragmentation/grid-gap-decorations-fragmentation-016.html
		grid/fragmentation/grid-gap-decorations-fragmentation-017.html
		grid/fragmentation/grid-gap-decorations-fragmentation-018-crash.html
		grid/fragmentation/grid-gap-decorations-fragmentation-019-crash.html
		grid/fragmentation/grid-gap-decorations-fragmentation-020.html
		grid/fragmentation/grid-gap-decorations-fragmentation-021.html
		grid/fragmentation/grid-gap-decorations-fragmentation-022.html
		grid/fragmentation/grid-gap-decorations-fragmentation-023.html
		grid/fragmentation/grid-gap-decorations-fragmentation-024.html
		grid/fragmentation/grid-gap-decorations-fragmentation-025.html
		grid/fragmentation/grid-gap-decorations-fragmentation-026.html
		grid/fragmentation/grid-gap-decorations-fragmentation-027.html
		grid/fragmentation/grid-gap-decorations-fragmentation-028.html
		grid/fragmentation/grid-gap-decorations-fragmentation-029.html
		grid/fragmentation/grid-gap-decorations-fragmentation-030.html
		grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-001.html
		grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-002.html
		grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-003.html
		grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-004.html
		grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-005.html
		grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-006.html
		grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-007.html
		grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-008.html
		grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-009.html
		grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-010.html
		grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-011.html
		grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-012.html
		grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-013.html
		grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-014.html
		grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-015.html
		grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-016.html
		grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-017.html
		grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-018.html
		grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-019.html
		grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-020.html
		grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-021.html
	</wpt>

<!-- Big Text: Color-Style-Width 

 ███▌   ███▌  █▌     ███▌  ████▌         ███▌  █████▌ █   ▐▌ █▌    █████▌       █▌    █▌ ████ ████▌  █████▌ █▌  █▌
█▌  █▌ █▌  █▌ █▌    █▌  █▌ █▌  █▌       █▌  █▌   █▌   ▐▌  █  █▌    █▌           █▌    █▌  ▐▌  █▌  █▌   █▌   █▌  █▌
█▌     █▌  █▌ █▌    █▌  █▌ █▌  █▌       █▌       █▌    █ ▐▌  █▌    █▌           █▌    █▌  ▐▌  █▌  █▌   █▌   █▌  █▌
█▌     █▌  █▌ █▌    █▌  █▌ ████▌  ████▌  ███▌    █▌    ▐▌█   █▌    ████   ████▌ █▌    █▌  ▐▌  █▌  █▌   █▌   █████▌
█▌     █▌  █▌ █▌    █▌  █▌ █▌▐█             █▌   █▌     █▌   █▌    █▌           █▌ ▐  █▌  ▐▌  █▌  █▌   █▌   █▌  █▌
█▌  █▌ █▌  █▌ █▌    █▌  █▌ █▌ ▐█        █▌  █▌   █▌     █▌   █▌    █▌           █▌ █▌ █▌  ▐▌  █▌  █▌   █▌   █▌  █▌
 ███▌   ███▌  █████  ███▌  █▌  █▌        ███▌    █▌     █▌   █████ █████▌        ██ ▐█▌  ████ ████▌    █▌   █▌  █▌
-->

<h2 id="color-style-width">
Color, style, and width</h2>

Property definitions in this section supersede the definitions of properties with the same names in
[[CSS-MULTICOL-1]].

<h3 id="column-row-rule-color">
Gap decoration color: The 'column-rule-color', 'row-rule-color', and 'rule-color' properties</h3>

	<pre class='propdef'>
		Name: column-rule-color, row-rule-color
		Value: <<line-color-list>> | <<auto-line-color-list>>
		Initial: currentcolor
		Applies to: <a>grid containers</a>, <a>flex containers</a>, <a>multicol containers</a>, and <a>grid lanes containers</a>
		Inherited: no
		Animation type: repeatable list, see [[#interpolation-behavior]].
	</pre>

	<pre class='prod'>
		<dfn>&lt;line-color-list&gt;</dfn>          = <<line-color-or-repeat>>#

	<dfn>&lt;auto-line-color-list&gt;</dfn>     = <<line-color-or-repeat>>#? ,
											         <<auto-repeat-line-color>> ,
											         <<line-color-or-repeat>>#?

	<dfn>&lt;line-color-or-repeat&gt;</dfn>     = [ <<color>> | <<repeat-line-color>> ]

	<dfn>&lt;repeat-line-color&gt;</dfn>        = repeat( [ <<integer [1,∞]>> ] , [ <<color>> ]# )

	<dfn>&lt;auto-repeat-line-color&gt;</dfn>   = repeat( auto , [ <<color>> ]# )
	</pre>

	These properties set the color of <a>gap decorations</a>.

	<pre class='propdef shorthand'>
		Name: rule-color
		Value: <<'column-rule-color'>>
		Inherited: no
		Applies to: Same as 'column-rule-color' and 'row-rule-color'
	</pre>

	This [=shorthand property=] sets 'column-rule-color' and 'row-rule-color' to the same value.

	<wpt>
		agnostic/gap-decorations-003.html
		agnostic/gap-decorations-004.html
		agnostic/gap-decorations-010-crash.html
		flex/flex-gap-decorations-multi-value-direction.html
		flex/flex-gap-decorations-multi-value-writing-mode.html
		grid/grid-gap-decorations-022.html
		grid/grid-gap-decorations-024.html
		grid/grid-gap-decorations-025.html
		grid/grid-gap-decorations-026.html
		grid/grid-gap-decorations-027.html
		grid/grid-gap-decorations-028.html
		grid/grid-gap-decorations-048.html
		grid/grid-gap-decorations-049.html
		grid/grid-gap-decorations-050.html
		grid/grid-gap-decorations-051.html
		grid/grid-gap-decorations-multi-value-direction.html
		grid/grid-gap-decorations-multi-value-writing-mode.html
		grid/grid-gap-decorations-visited-alpha-clamp.html
		multicol/multicol-gap-decorations-019.html
		multicol/multicol-gap-decorations-multi-value-direction.html
		multicol/multicol-gap-decorations-multi-value-writing-mode.html
		parsing/gap-decorations-color-computed.html
		parsing/gap-decorations-color-invalid.html
		parsing/gap-decorations-color-valid.html
	</wpt>

<h3 id="column-row-rule-style">
Gap decoration style: The 'column-rule-style', 'row-rule-style', and 'rule-style' properties</h3>

	<pre class='propdef'>
		Name: column-rule-style, row-rule-style
		Value: <<line-style-list>> | <<auto-line-style-list>>
		Initial: none
		Applies to: <a>grid containers</a>, <a>flex containers</a>, <a>multicol containers</a>, and <a>grid lanes containers</a>
		Inherited: no
		Animation type: discrete
	</pre>

	<pre class='prod'>
		<dfn>&lt;line-style-list&gt;</dfn>          = <<line-style-or-repeat>>#

	<dfn>&lt;auto-line-style-list&gt;</dfn>     = <<line-style-or-repeat>>#? ,
											         <<auto-repeat-line-style>> ,
											         <<line-style-or-repeat>>#?

	<dfn>&lt;line-style-or-repeat&gt;</dfn>     = [ <<line-style>> | <<repeat-line-style>> ]

	<dfn>&lt;repeat-line-style&gt;</dfn>        = repeat( [ <<integer [1,∞]>> ] , [ <<line-style>> ]# )

	<dfn>&lt;auto-repeat-line-style&gt;</dfn>   = repeat( auto , [ <<line-style>> ]# )
	</pre>

	These properties set the styles of <a>gap decorations</a>.
	The <<line-style>> values apply the same as for 'border-style'.

	<pre class='propdef shorthand'>
		Name: rule-style
		Value: <<'column-rule-style'>>
		Inherited: no
		Applies to: Same as 'column-rule-style' and 'row-rule-style'
	</pre>

	This [=shorthand property=] sets 'column-rule-style' and 'row-rule-style' to the same value.

	<wpt>
		flex/flex-gap-decorations-002.html
		flex/flex-gap-decorations-003.html
		flex/flex-gap-decorations-004.html
		flex/flex-gap-decorations-005.html
		flex/flex-gap-decorations-017.html
		flex/flex-gap-decorations-018.html
		grid/grid-gap-decorations-002.html
		grid/grid-gap-decorations-003.html
		grid/grid-gap-decorations-004.html
		grid/grid-gap-decorations-005.html
		grid/grid-gap-decorations-016.html
		grid/grid-gap-decorations-017.html
		grid/grid-gap-decorations-020.html
		grid/grid-gap-decorations-021.html
		grid/grid-gap-decorations-039.html
		parsing/gap-decorations-style-computed.html
		parsing/gap-decorations-style-invalid.html
		parsing/gap-decorations-style-valid.html
	</wpt>

<h3 id="column-row-rule-width">
Gap decoration width: The 'column-rule-width', 'row-rule-width', and 'rule-width' properties</h3>

	<pre class='propdef'>
		Name: column-rule-width, row-rule-width
		Value: <<line-width-list>> | <<auto-line-width-list>>
		Initial: medium
		Applies to: <a>grid containers</a>, <a>flex containers</a>, <a>multicol containers</a>, and <a>grid lanes containers</a>
		Inherited: no
		Computed value: list of absolute lengths, <a>snapped as a border width</a>
		Animation type: repeatable list, see [[#interpolation-behavior]].
	</pre>

	<pre class='prod'>
		<dfn>&lt;line-width-list&gt;</dfn>          = <<line-width-or-repeat>>#

		<dfn>&lt;auto-line-width-list&gt;</dfn>     = <<line-width-or-repeat>>#? ,
											           <<auto-repeat-line-width>> ,
											           <<line-width-or-repeat>>#?

		<dfn>&lt;line-width-or-repeat&gt;</dfn>     = [ <<line-width>> | <<repeat-line-width>> ]

		<dfn>&lt;repeat-line-width&gt;</dfn>        = repeat( [ <<integer [1,∞]>> ] , [ <<line-width>> ]# )

		<dfn>&lt;auto-repeat-line-width&gt;</dfn>   = repeat( auto , [ <<line-width>> ]# )
	</pre>

	These properties set the widths of <a>gap decorations</a>. Negative values are not allowed.

	<pre class='propdef shorthand'>
		Name: rule-width
		Value: <<'column-rule-width'>>
		Inherited: no
		Applies to: Same as 'column-rule-width' and 'row-rule-width'
	</pre>

	This [=shorthand property=] sets 'column-rule-width' and 'row-rule-width' to the same value.

	<wpt>
		agnostic/gap-decorations-009-crash.html
		grid/grid-gap-decorations-018.html
		grid/grid-gap-decorations-019.html
		multicol/multicol-gap-decorations-004.html
		parsing/gap-decorations-col-rule-width.html
		parsing/gap-decorations-width-computed.html
		parsing/gap-decorations-width-invalid.html
		parsing/gap-decorations-width-valid.html
	</wpt>

<!-- Big Text: Shorthands 

 ███▌  █▌  █▌  ███▌  ████▌  █████▌ █▌  █▌  ███▌  █    █▌ ████▌   ███▌ 
█▌  █▌ █▌  █▌ █▌  █▌ █▌  █▌   █▌   █▌  █▌ ▐█ ▐█  █▌   █▌ █▌  █▌ █▌  █▌
█▌     █▌  █▌ █▌  █▌ █▌  █▌   █▌   █▌  █▌ █▌  █▌ ██▌  █▌ █▌  █▌ █▌    
 ███▌  █████▌ █▌  █▌ ████▌    █▌   █████▌ █▌  █▌ █▌▐█ █▌ █▌  █▌  ███▌ 
    █▌ █▌  █▌ █▌  █▌ █▌▐█     █▌   █▌  █▌ █████▌ █▌  ██▌ █▌  █▌     █▌
█▌  █▌ █▌  █▌ █▌  █▌ █▌ ▐█    █▌   █▌  █▌ █▌  █▌ █▌   █▌ █▌  █▌ █▌  █▌
 ███▌  █▌  █▌  ███▌  █▌  █▌   █▌   █▌  █▌ █▌  █▌ █▌   ▐▌ ████▌   ███▌ 
-->

<h3 id="gap-decoration-shorthands">
Gap decoration shorthands: The 'column-rule', 'row-rule', and 'rule' properties</h3>

	<pre class='propdef shorthand'>
		Name: column-rule, row-rule
		Value: <<gap-rule-list>> | <<gap-auto-rule-list>>
	</pre>

	<pre class='prod'>
		<dfn>&lt;gap-rule-list&gt;</dfn>        = <<gap-rule-or-repeat>>#

		<dfn>&lt;gap-auto-rule-list&gt;</dfn>   = <<gap-rule-or-repeat>>#? ,
								             <<gap-auto-repeat-rule>> ,
								             <<gap-rule-or-repeat>>#?

		<dfn>&lt;gap-rule-or-repeat&gt;</dfn>   = <<gap-rule>> | <<gap-repeat-rule>>

		<dfn>&lt;gap-repeat-rule&gt;</dfn>      = repeat( <<integer [1,∞]>> , <<gap-rule>># )

		<dfn>&lt;gap-auto-repeat-rule&gt;</dfn> = repeat( auto , <<gap-rule>># )

		<dfn>&lt;gap-rule&gt;</dfn>             = <<line-width>> || <<line-style>> || <<color>>
	</pre>

	These [=shorthand properties=] set values for the
	'column-rule-width', 'column-rule-style', and 'column-rule-color' properties,
	or the 'row-rule-width', 'row-rule-style', and 'row-rule-color' properties,
	respectively.

	<pre class='propdef shorthand'>
		Name: rule
		Value: <<'column-rule'>>
		Inherited: no
		Applies to: Same as 'column-rule' and 'row-rule'
	</pre>

	This [=shorthand property=] sets 'column-rule' and 'row-rule' to the same values.

	<wpt>
		flex/flex-gap-decorations-019.html
		parsing/gap-decorations-bidirectional-shorthands.html
		parsing/gap-decorations-rule-initial-value-crash.html
		parsing/gap-decorations-rule-shorthand-computed.html
		parsing/gap-decorations-rule-shorthand-invalid.html
		parsing/gap-decorations-rule-shorthand-valid.html
		parsing/gap-decorations-rule-shorthand.html
	</wpt>

<!-- Big Text: Repeaters

████▌  █████▌ ████▌  █████▌  ███▌  █████▌ █████▌ ████▌   ███▌ 
█▌  █▌ █▌     █▌  █▌ █▌     ▐█ ▐█    █▌   █▌     █▌  █▌ █▌  █▌
█▌  █▌ █▌     █▌  █▌ █▌     █▌  █▌   █▌   █▌     █▌  █▌ █▌    
████▌  ████   ████▌  ████   █▌  █▌   █▌   ████   ████▌   ███▌ 
█▌▐█   █▌     █▌     █▌     █████▌   █▌   █▌     █▌▐█       █▌
█▌ ▐█  █▌     █▌     █▌     █▌  █▌   █▌   █▌     █▌ ▐█  █▌  █▌
█▌  █▌ █████▌ █▌     █████▌ █▌  █▌   █▌   █████▌ █▌  █▌  ███▌ 
-->

<h3 id="lists-repeat">
Lists of values and the ''repeat()'' notation</h3>

	Each of the properties in this section accepts a comma-separated list of values.
	Setting multiple values in this way allows for varying <a>gap decorations</a> within a given container.

	<div class="example">
		An author might specify alternating red and blue column rules as follows:
		<pre>
			column-rule-width: 1px;
			column-rule-style: solid;
			column-rule-color: red, blue;
		</pre>
	</div>

	Such a list may contain <dfn for="<repeat-line-color>,<auto-repeat-line-color>,<repeat-line-style>,<auto-repeat-line-style>,<repeat-line-width>,<auto-repeat-line-width>">repeat()</dfn> notations.
	Similar to [[css-grid-1#repeat-notation]], these notations allow a series of <a>gap decorations</a>
	that exhibit a recurring pattern to be written in a more compact form.

	The generic form of the ''repeat()'' syntax is, approximately,
	<pre class='prod'>
		repeat( [ <<integer [1,∞]>> | auto ] , &lt;value&gt;# )
	</pre>

	The first argument to ''repeat()'' specifies the number of repetitions.
	<dl>
		<dt><<integer>>
		<dd>
			Specifies an <dfn>integer repeater</dfn>.
			An <a>integer repeater</a> expands out to the list of values in the second argument,
			repeated as many times as specified by the first argument.

			<div class="example">
				An author may write:
				<pre>
					column-rule-color: gray, red, blue, red, blue, red, blue, gray;
				</pre>
				Or shorten to the following, which produces the same sequence of colors:
				<pre>
					column-rule-color: gray, repeat(3, red, blue), gray;
				</pre>
			</div>

		<dt><dfn value for="repeat()">auto</dfn>
		<dd>
			Specifies an <dfn>auto repeater</dfn>.
			An <a>auto repeater</a> will be used to fill in values for gaps
			that would not otherwise receive values from other parts of the list.
			At most one ''repeat()'' in a given list of values may be an <a>auto repeater</a>.

			<div class="example">
				Continuing from the previous example, if the author does not know how
				many columns will be in the final layout, they might instead write:
				<pre>
					column-rule-color: gray, repeat(auto, red, blue), gray;
				</pre>
				Which will produce a gray decoration in the first and last column gaps,
				and alternating red and blue decorations in the in-between column gaps.
			</div>
	</dl>

	The second argument to ''repeat()'' is a comma-separated list of values
	that would be accepted by the property in which the ''repeat()'' appears.

<!-- Big Text: Assigning 

 ███▌   ███▌   ███▌  ████  ███▌  █    █▌ ████ █    █▌  ███▌ 
▐█ ▐█  █▌  █▌ █▌  █▌  ▐▌  █▌  █▌ █▌   █▌  ▐▌  █▌   █▌ █▌  █▌
█▌  █▌ █▌     █▌      ▐▌  █▌     ██▌  █▌  ▐▌  ██▌  █▌ █▌    
█▌  █▌  ███▌   ███▌   ▐▌  █▌ ██▌ █▌▐█ █▌  ▐▌  █▌▐█ █▌ █▌ ██▌
█████▌     █▌     █▌  ▐▌  █▌  █▌ █▌  ██▌  ▐▌  █▌  ██▌ █▌  █▌
█▌  █▌ █▌  █▌ █▌  █▌  ▐▌  █▌  █▌ █▌   █▌  ▐▌  █▌   █▌ █▌  █▌
█▌  █▌  ███▌   ███▌  ████  ███▌  █▌   ▐▌ ████ █▌   ▐▌  ███▌ 
-->

<h3 id="assigning">
Assigning gap decoration values to gaps</h3>

	Gap decorations are [=assigned gap decoration values|assigned=] after [=collapsed gutter|gutter collapsing=] has been applied.
	A given set of [=collapsed gutters=] consume exactly one [=gap decoration=]; the next [=gap decoration=]
	is applied to the next gutter (or set of [=collapsed gutters=]). Therefore, [=collapsed gutters=] are treated as a
	single [=gap=] for decoration purposes.

	A gap that is suppressed due to <a href="#fragmentation">fragmentation</a>
	still consumes a gap decoration value from the pattern, even though no decoration
	is drawn there. This preserves a consistent association between gaps and decorations across
	fragmented and unfragmented contexts.

	Similarly, when a [=flex container=] wraps into multiple flex lines, the decoration pattern is assigned to gaps sequentially across the flexbox
	and does not restart at the beginning of each flex line.

	<div algorithm>
		To <dfn>assign gap decoration values</dfn> to a list of |gaps| using a list of |values|:

		<ol>
			<li>
				Replace any <a>integer repeaters</a> in |values| with their expanded-out equivalents.
			</li>

			<li>
				If the list contains no <a>auto repeater</a>, then:
			</li>

				<ol>
					<li>
						Beginning from the first item in |values| and the first item in |gaps|,
						assign each value to the corresponding gap.
						If there are fewer values than gaps,
						repeat beginning from the first item in |values|,
						as many times as needed.
					</li>
					
					<li>
						End this algorithm.
					</li>
				</ol>

			<li>
				|values| contains an <a>auto repeater</a>.
				Let |leading count| be the number of items in |values| before the <a>auto repeater</a>.
				Let |trailing count| be the number of items in |values| after the <a>auto repeater</a>.
			</li>

			<li>
				Partition |gaps| as follows:

				<ol>
					<li>
						Let |leading gaps| contain the first |leading count| items in |gaps|.
					</li>
					<li>
						Let |trailing gaps| contain the last |trailing count| items in |gaps|,
						excluding any items in |leading gaps|.
					</li>
					<li>
						Let |auto gaps| contain any items in |gaps|
						that are not in either |leading gaps| or |trailing gaps|.
					</li>
				</ol>
			
			<li>
				If |leading gaps| is non-empty,
				<a>assign gap decoration values</a> to |leading gaps|
				using the first |leading count| items in |values|.
			</li>
			
			<li>
				If |trailing gaps| is non-empty,
				<a>assign gap decoration values</a> to |trailing gaps|
				using the first |trailing count| items in |values|.
			</li>
			
			<li>
				If |auto gaps| is non-empty,
				<a>assign gap decoration values</a> to |auto gaps|
				using the list of values in the second argument of the <a>auto repeater</a>.
			</li>
		</ol>
	</div>

	<wpt>
		agnostic/gap-decorations-011-crash.html
		grid/grid-gap-decorations-058-crash.html
		grid/grid-gap-decorations-059-crash.html
		grid/grid-gap-decorations-060-crash.html
		grid/grid-gap-decorations-061.html
		grid/grid-gap-decorations-062.html
		grid/grid-gap-decorations-063.html
		grid/grid-gap-decorations-collapsed-all-auto-fit.html
		grid/grid-gap-decorations-collapsed-leading-auto-fit.html
		grid/grid-gap-decorations-collapsed-leading-spanner.html
		grid/grid-gap-decorations-collapsed-middle-auto-fit.html
		grid/grid-gap-decorations-collapsed-middle-spanner.html
		grid/grid-gap-decorations-collapsed-trailing-auto-fit.html
		grid/grid-gap-decorations-collapsed-trailing-spanner.html
	</wpt>

<!-- Big Text: Interpolation 

████ █    █▌ █████▌ █████▌ ████▌  ████▌   ███▌  █▌     ███▌  █████▌ ████  ███▌  █    █▌
 ▐▌  █▌   █▌   █▌   █▌     █▌  █▌ █▌  █▌ █▌  █▌ █▌    ▐█ ▐█    █▌    ▐▌  █▌  █▌ █▌   █▌
 ▐▌  ██▌  █▌   █▌   █▌     █▌  █▌ █▌  █▌ █▌  █▌ █▌    █▌  █▌   █▌    ▐▌  █▌  █▌ ██▌  █▌
 ▐▌  █▌▐█ █▌   █▌   ████   ████▌  ████▌  █▌  █▌ █▌    █▌  █▌   █▌    ▐▌  █▌  █▌ █▌▐█ █▌
 ▐▌  █▌  ██▌   █▌   █▌     █▌▐█   █▌     █▌  █▌ █▌    █████▌   █▌    ▐▌  █▌  █▌ █▌  ██▌
 ▐▌  █▌   █▌   █▌   █▌     █▌ ▐█  █▌     █▌  █▌ █▌    █▌  █▌   █▌    ▐▌  █▌  █▌ █▌   █▌
████ █▌   ▐▌   █▌   █████▌ █▌  █▌ █▌      ███▌  █████ █▌  █▌   █▌   ████  ███▌  █▌   ▐▌
-->

<h3 id="interpolation-behavior">Interpolation of list values</h3>
When interpolating ''repeat()'' values, or lists of values for 'rule-color' or 'rule-width', the interpolation proceeds in two steps:

	<ol>
	<li><em>Expansion:</em> Expand any [=integer repeater=] into its equivalent list of values. </li>
	<li><em>List Interpolation:</em> Apply the [=repeatable list=] interpolation algorithm to the expanded lists, interpolating each item against its counterpart.</li>
	</ol>
	<div class="example">
		<pre class="lang-css">
		@keyframes example {
			from { column-rule-width: 10px; }
			to   { column-rule-width: 20px, 40px; }
		}
		</pre>
		Interpolation of the above values would result in expansion of the
		"from" and "to" values to create lists of equal lengths:
		<pre>
		From:   10px, 10px
		At 50%: 15px, 25px
		To:     20px, 40px
		</pre>
	</div>
	<div class="example">
		<pre class="lang-css">
		@keyframes example {
			from { column-rule-width: repeat(2, 5px, 10px); }
			to   { column-rule-width: repeat(2, 15px, 20px); }
		}
		</pre>
		Interpolation of the above values would result in expansion of the
		"from" and "to" values to create lists of equal lengths:
		<pre>
		From:    5px, 10px,  5px, 10px
		At 50%: 10px, 15px, 10px, 15px
		To:     15px, 20px, 15px, 20px
		</pre>
	</div>

	<div class="example">
		<pre class="lang-css">
		@keyframes example {
			from { column-rule-width: repeat(2, 10px, 20px); }
			to   { column-rule-width: 20px; }
		}
		</pre>
		Interpolation of the above values would result in expansion of the
		"from" and "to" values to create lists of equal lengths:
		<pre>
		From:   10px, 20px, 10px, 20px
		At 50%: 15px, 20px, 15px, 20px
		To:     20px, 20px, 20px, 20px
		</pre>
	</div>
	<div class="example">
		<pre class="lang-css">
		@keyframes example {
			from { column-rule-width: repeat(2, 10px, 20px); }
			to   { column-rule-width: 20px, 30px; }
		}
		</pre>
		Interpolation of the above values would result in expansion of the
		"from" and "to" values to create lists of equal lengths:
		<pre>
		From:   10px, 20px, 10px, 20px
		At 50%: 15px, 25px, 15px, 25px
		To:     20px, 30px, 20px, 30px
		</pre>
	</div>

	<div algorithm="interpolate with auto repeaters">

		When either of the lists we are interpolating between (|from| and |to|) include an <a>auto repeater</a>:

			<ol>
				<li>
					Split each of |from| and |to| into segments, similar to how we [=assign gap decoration values=]:
					<ol>
						<li>Let |leading values| be the values before the <a>auto repeater</a>.</li>
						<li>Let |trailing values| be the values after the <a>auto repeater</a>.</li>
						<li>Let |auto values| be the values inside the <a>auto repeater</a>.</li>
					</ol>
				</li>
				<li>If only one of |from| or |to| contains an auto-repeater, we fall back to [=discrete=] interpolation.</li>
				<li>Expand any integer repeaters on each segment.</li>
				<li>
					If the length of |leading values| in |from| and |leading values| in |to| don't match, we fall back to [=discrete=] interpolation.
					If the length of |trailing values| in |from| and |trailing values| in |to| don't match, we fall back to [=discrete=] interpolation.
				</li>
				<li>
					When both |from| and |to| contain auto-repeaters, and the length of their segments match as described above,
					apply [=repeatable list=] interpolation to the lists of values in each |auto values|.
				</li>
			</ol>

		<div class="example">
			<pre class="lang-css">
			@keyframes example {
				from { column-rule-width: 10px, repeat(auto, 20px), 30px }
				to   { column-rule-width: 20px, repeat(auto, 40px), 40px }
			}
			</pre>
			Length of the |leading values| and |trailing values| across |from| and |to| match, so we can apply the [=repeatable list=] algorithm to each segment.
			<pre>
			From:   10px, repeat(auto, 20px), 30px
			At 50%: 15px, repeat(auto, 30px), 35px
			To:     20px, repeat(auto, 40px), 40px
			</pre>
		</div>

		<div class="example">
			<pre class="lang-css">
			@keyframes example {
				from { column-rule-width: 10px, 20px, repeat(auto, 20px), 30px }
				to   { column-rule-width: 20px, 30px, repeat(auto, 40px, 50px), 40px }
			}
			</pre>
			Length of the |leading values| and |trailing values| across |from| and |to| match, so we can apply the [=repeatable list=] algorithm to each segment.
			<pre>
			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
			</pre>
		</div>

		<div class="example">
			<pre class="lang-css">
			@keyframes example {
				from { column-rule-width: 10px, repeat(auto, 20px) }
				to   { column-rule-width: 20px, 30px, repeat(auto, 40px, 50px) }
			}
			</pre>
			Length of the |from| |leading values| and |to| |leading values| don't match, so we fall back to [=discrete=] interpolation.
		</div>

		<div class="example">
			<pre class="lang-css">
			@keyframes example {
				from { column-rule-width: 10px, repeat(auto, 20px), 30px }
				to   { column-rule-width: 20px, repeat(auto, 40px), 40px, 50px }
			}
			</pre>
			Length of the |from| |trailing values| and |to| |trailing values| don't match, so we fall back to [=discrete=] interpolation.
		</div>

		<div class="example">
			<pre class="lang-css">
			@keyframes example {
				from { column-rule-width: 10px, repeat(auto, 20px), 30px }
				to   { column-rule-width: 20px }
			}
			</pre>
			Only |from| contains an <a>auto repeater</a>, so we fall back to [=discrete=] interpolation.
		</div>
	</div>

	<wpt>
		animation/column-rule-inset-interpolation.html
		animation/gap-decorations-color-neutral-keyframe-001.html
		animation/gap-decorations-color-neutral-keyframe-002.html
		animation/gap-decorations-color-neutral-keyframe-003.html
		animation/gap-decorations-color-neutral-keyframe-004.html
		animation/gap-decorations-color-neutral-keyframe-005.html
		animation/gap-decorations-inset-neutral-keyframe-001.html
		animation/gap-decorations-inset-neutral-keyframe-002.html
		animation/gap-decorations-width-neutral-keyframe-001.html
		animation/gap-decorations-width-neutral-keyframe-002.html
		animation/gap-decorations-width-neutral-keyframe-003.html
		animation/gap-decorations-width-neutral-keyframe-004.html
		animation/gap-decorations-width-neutral-keyframe-005.html
		animation/row-rule-color-interpolation.html
		animation/row-rule-inset-interpolation.html
		animation/row-rule-width-interpolation.html
		animation/rule-color-interpolation-conversion-001.html
		animation/rule-color-interpolation-conversion-002.html
		animation/rule-color-interpolation-conversion-crash.html
		animation/rule-color-interpolation-multiple-values-001.html
		animation/rule-color-interpolation-repeaters-001.html
		animation/rule-width-interpolation-conversion-001.html
		animation/rule-width-interpolation-conversion-002.html
		animation/rule-width-interpolation-multiple-values-001.html
		animation/rule-width-interpolation-multiple-values-002.html
		animation/rule-width-interpolation-repeaters.html
	</wpt>

<!-- Big Text: Serialization 

 ███▌  █████▌ ████▌  ████  ███▌  █▌    ████ █████▌  ███▌  █████▌ ████  ███▌  █    █▌
█▌  █▌ █▌     █▌  █▌  ▐▌  ▐█ ▐█  █▌     ▐▌      ▐▌ ▐█ ▐█    █▌    ▐▌  █▌  █▌ █▌   █▌
█▌     █▌     █▌  █▌  ▐▌  █▌  █▌ █▌     ▐▌     ▐▌  █▌  █▌   █▌    ▐▌  █▌  █▌ ██▌  █▌
 ███▌  ████   ████▌   ▐▌  █▌  █▌ █▌     ▐▌    █▌   █▌  █▌   █▌    ▐▌  █▌  █▌ █▌▐█ █▌
    █▌ █▌     █▌▐█    ▐▌  █████▌ █▌     ▐▌   █     █████▌   █▌    ▐▌  █▌  █▌ █▌  ██▌
█▌  █▌ █▌     █▌ ▐█   ▐▌  █▌  █▌ █▌     ▐▌  █      █▌  █▌   █▌    ▐▌  █▌  █▌ █▌   █▌
 ███▌  █████▌ █▌  █▌ ████ █▌  █▌ █████ ████ █████▌ █▌  █▌   █▌   ████  ███▌  █▌   ▐▌
-->

<h3 id="serialization">Serialization</h3>

	The 'column-rule', 'row-rule', and 'rule' shorthands
	are serialized from component longhand properties
	only if the longhand properties are [=repeater aligned=].
	If the longhand properties are not [=repeater aligned=],
	the shorthand serializes as an empty string.

	<div algorithm>
		Let |W|, |S| and |C| be the values for the width, style, and color
		longhand properties respectively. Recall that each is a list of
		items, where an item is either a single value or a ''repeat()'' notation.
		The longhand properties are <dfn>repeater aligned</dfn>
		if and only if all of the following are true:

		<ol>
			<li>
				|W|, |S| and |C| all have the same number of items.
			</li>
			<li>
				For each item index |i|, |W|[|i|], |S|[|i|] and |C|[|i|] all have the same shape:
				<ol>
					<li>
						they are either all non-repeat values, all <a>integer repeaters</a>, or all <a>auto repeaters</a>.
					</li>
					<li>
						If they are <a>integer repeaters</a>, the <<integer>> values are equal.
					</li>
					<li>
						Each ''repeat()'' notation contains the same number of values.
					</li>
				</ol>
			</li>
		</ol>
	</div>

	<div class="example">
		This shorthand declaration:
		<pre>
			column-rule: 1px solid red, 2px dashed green, 3px dotted blue;
		</pre>

		Breaks down to the following longhand values:

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

		Which serialize back to the same original shorthand value,
		because the longhands are <a>repeater aligned</a>:
		all three properties have the same number of items (3),
		and each item is a single value (not a repeater).

		The same behavior would occur if the three longhands were specified directly
		rather than coming from a shorthand.
	</div>

	<div class="example">
		This shorthand declaration:
		<pre>
			column-rule: 1px solid red, repeat(2, 2px dashed green);
		</pre>

		Breaks down to the following longhand values:

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

		Which serialize back to the same original shorthand value,
		because the longhands are <a>repeater aligned</a>:
		all three properties have the same number of items (2),
		and at each index the items have matching types
		(single values at index 0, integer repeaters at index 1),
		the integer repeaters have the same repeat count (2),
		and the integer repeaters contain the same number of values (1).

		The same behavior would occur if the three longhands were specified directly
		rather than coming from a shorthand.
	</div>

	<div class="example">
		This shorthand declaration:
		<pre>
			column-rule: repeat(auto, 1px solid red, 2px dashed green);
		</pre>

		Breaks down to the following longhand values:

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

		Which serialize back to the same original shorthand value,
		because the longhands are <a>repeater aligned</a>:
		all three properties have the same number of items (1),
		each item is an auto repeater,
		and the auto repeaters contain the same number of values (2).

		The same behavior would occur if the three longhands were specified directly
		rather than coming from a shorthand.
	</div>

	<div class="example">
		These declarations:
		<pre>
			column-rule: repeat(auto, 1px solid red, 2px dashed green);
			column-rule-width: repeat(auto, 3px, 4px, 5px);
		</pre>

		Break down to the following longhand values:

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

		The 'column-rule' shorthand will serialize as an empty string
		because the longhands are not <a>repeater aligned</a>:
		the auto repeaters contain different numbers of values.

		The same behavior would occur if the three longhands were specified directly
		rather than coming from a shorthand.
	</div>

	<div class="example">
		These declarations:
		<pre>
			column-rule: repeat(2, 1px solid red, 2px dashed green);
			column-rule-style: dashed, dotted, solid;
		</pre>

		Break down to the following longhand values:

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

		The 'column-rule' shorthand will serialize as an empty string
		because the longhands are not <a>repeater aligned</a>:
		the items at index 0 have mismatched types
		(integer repeater for width and color, single value for style).

		The same behavior would occur if the three longhands were specified directly
		rather than coming from a shorthand.
	</div>

	<div class="example">
		These declarations:
		<pre>
			column-rule: repeat(2, 1px solid red, 2px dashed green);
			column-rule-color: repeat(4, red, cyan);
		</pre>

		Break down to the following longhand values:

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

		The 'column-rule' shorthand will serialize as an empty string
		because the longhands are not <a>repeater aligned</a>:
		the integer repeaters have different repeat counts.

		The same behavior would occur if the three longhands were specified directly
		rather than coming from a shorthand.
	</div>

	<wpt>
		agnostic/gap-decorations-007-crash.html
		agnostic/gap-decorations-008-crash.html
		multicol/multicol-gap-decorations-021.html
		parsing/gap-decorations-important.html
	</wpt>

<!-- Big Text: Acknowledgements 

 ███▌   ███▌  █▌  █▌ █    █▌  ███▌  █▌    █▌ █▌    █████▌ ████▌   ███▌  █████▌ █     █ █████▌ █    █▌ █████▌  ███▌ 
▐█ ▐█  █▌  █▌ █▌ █▌  █▌   █▌ █▌  █▌ █▌    █▌ █▌    █▌     █▌  █▌ █▌  █▌ █▌     ██   ██ █▌     █▌   █▌   █▌   █▌  █▌
█▌  █▌ █▌     █▌█▌   ██▌  █▌ █▌  █▌ █▌    █▌ █▌    █▌     █▌  █▌ █▌     █▌     █▌█ █▐█ █▌     ██▌  █▌   █▌   █▌    
█▌  █▌ █▌     ██     █▌▐█ █▌ █▌  █▌ █▌    █▌ █▌    ████   █▌  █▌ █▌ ██▌ ████   █▌ █ ▐█ ████   █▌▐█ █▌   █▌    ███▌ 
█████▌ █▌     █▌█▌   █▌  ██▌ █▌  █▌ █▌ ▐  █▌ █▌    █▌     █▌  █▌ █▌  █▌ █▌     █▌   ▐█ █▌     █▌  ██▌   █▌       █▌
█▌  █▌ █▌  █▌ █▌ █▌  █▌   █▌ █▌  █▌ █▌ █▌ █▌ █▌    █▌     █▌  █▌ █▌  █▌ █▌     █▌   ▐█ █▌     █▌   █▌   █▌   █▌  █▌
█▌  █▌  ███▌  █▌  █▌ █▌   ▐▌  ███▌   ██ ▐█▌  █████ █████▌ ████▌   ███▌  █████▌ █▌   ▐█ █████▌ █▌   ▐▌   █▌    ███▌ 
-->

<h2 id="acknowledgements">
Acknowledgements</h2>

<p>
	Many thanks to Sam Davis Omekara Jr. and Javier Contreras Tenorio
	who contributed a significant amount of normative text, examples, and WPT coverage to this specification.
</p>

<p>
	Mats Palmgren's earlier 
	<a href="https://matspalmgren.github.io/css-gap-decorations/Overview.html">proposal</a>
	for Gap Decorations helped inform the direction of this specification.
</p>

<p>
	Additional feedback that helped shape this specification was contributed by many people, including:
	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,
	and the CSS Working Group members.
</p>

<h2 id="privacy">
Privacy Considerations</h2>

No new privacy considerations have been reported on this specification.

<h2 id="security">
Security Considerations</h2>

No new security considerations have been reported on this specification.

<h2 id="changes">
Changes</h2>

<h3 id="changes=20260227">
Changes since the <a href="https://www.w3.org/TR/2026/WD-css-gaps-1-20260227/">27 February 2026 Working Draft</a></h3>

	<ul class="non-normative">
		<li>Added the ''column-rule-visibility-items/normal'' value to [[#visibility|*-rule-visibility-items]] and made it the new initial value.
			(<a href="https://github.com/w3c/csswg-drafts/issues/13477">Issue 13477</a>)
		<li>Clarified applicability of writing mode and text decoration to gap decorations.
			(<a href="https://github.com/w3c/csswg-drafts/issues/13648">Issue 13648</a>,
			<a href="https://github.com/w3c/csswg-drafts/issues/13649">Issue 13649</a>)
		<li>Moved the [[#gaps|gap]] properties from [[!CSS-ALIGN-3]] to this specification.
			(<a href="https://github.com/w3c/csswg-drafts/issues/13089">Issue 13089</a>)
		<li>Updated edge and interior insets to be cap and junction insets.
			(<a href="https://github.com/w3c/csswg-drafts/issues/13697">Issue 13697</a>)
		<li>Clarified that gaps suppressed due to fragmentation still consume gap decoration values.
			(<a href="https://github.com/w3c/csswg-drafts/issues/13754">Issue 13754</a>)
		<li>Added the ''<inset-value>/overlap-join'' value to the [[#inset|rule-inset]] properties.
			(<a href="https://github.com/w3c/csswg-drafts/issues/13137">Issue 13137</a>)
		<li>Clarified that decoration patterns do not restart at the beginning of each flex line.
			(<a href="https://github.com/w3c/csswg-drafts/issues/13663">Issue 13663</a>)
		<li>Updated the Abstract and Introduction to reflect changes.
		<li>Updated with links to additional WPTs.
		<li>Updated the Acknowledgements section.
	</ul>

<h3 id="changes-20250417">
Changes since the <a href="https://www.w3.org/TR/2025/WD-css-gaps-1-20250417/">17 April 2025 Working Draft</a></h3>

	<ul class="non-normative">
		<li>Specified the behavior when gaps are coincident due to track collapsing.
			(<a href="https://github.com/w3c/csswg-drafts/issues/11814">Issue 11814</a>)
		<li>Renamed ''rule-paint-order'' to 'rule-overlap'.
			(<a href="https://github.com/w3c/csswg-drafts/issues/12540">Issue 12540</a>)
		<li>Updated the definition for intersections to use [=gutter=].
			(<a href="https://github.com/w3c/csswg-drafts/issues/12084">Issue 12084</a>)
		<li>Updated trailing gap decoration assignment to use values in forward order.
			(<a href="https://github.com/w3c/csswg-drafts/issues/12527">Issue 12527</a>)
		<li>Specified the interpolation behavior for values which may contain repeaters.
			(<a href="https://github.com/w3c/csswg-drafts/issues/12431">Issue 12431</a>)
		<li>Removed the special case of 'column-rule-width' having a computed value of ''0'' when 'column-rule-style' is ''<line-style>/none'' or ''<line-style>/hidden''.
			(<a href="https://github.com/w3c/csswg-drafts/issues/11494">Issue 11494</a>)
		<li>Changed the rule-outset properties to [[#inset|rule-inset]] and introduced related properties.
			(<a href="https://github.com/w3c/csswg-drafts/issues/12603">Issue 12603</a>,
			 <a href="https://github.com/w3c/csswg-drafts/issues/12848">Issue 12848</a>,
			 <a href="https://github.com/w3c/csswg-drafts/issues/8402">Issue 8402</a>)
		<li>Updated the initial value of the [[#inset|inset]] properties to ''0'' and removed the auto keyword.
			(<a href="https://github.com/w3c/csswg-drafts/issues/13137">Issue 13137</a>)
		<li>Added a paragraph clarifying that gap decorations are not drawn where gaps are suppressed due to fragment breaks.
			(<a href="https://github.com/w3c/csswg-drafts/issues/11520">Issue 11520</a>)
		<li>Updated the behavior for when gaps are coincident due to track collapsing.
			(<a href="https://github.com/w3c/csswg-drafts/issues/11814">Issue 11814</a>)
		<li>Added a section for serializing shorthands from separate longhands.
			(<a href="https://github.com/w3c/csswg-drafts/issues/12201">Issue 12201</a>)
		<li>Updated the color, width, and style longhand properties to use comma-separated lists instead of space-separated lists.
			(<a href="https://github.com/w3c/csswg-drafts/issues/12201">Issue 12201</a>)
		<li>Added section for gap decorations next to empty grid areas.
			(<a href="https://github.com/w3c/csswg-drafts/issues/12602">Issue 12602</a>)
		<li>Clarified that alignment space contributes to gap size.
			(<a href="https://github.com/w3c/csswg-drafts/issues/12922">Issue 12922</a>)
		<li>Renamed the [[#break|break]] value ''spanning-item'' to ''column-rule-break/normal''.
			(<a href="https://github.com/w3c/csswg-drafts/issues/13127">Issue 13127</a>)
		<li>Refreshed examples to reflect changes to the specification.
		<li>Added links to WPT suite.
		<li>Added Acknowledgements section.
	</ul>