Title: CSS Gap Decorations Module Level 1
Shortname: css-gaps
Level: 1
Status: ED
Prepare for TR: no
Group: csswg
Work Status: exploring
Repository: w3c/csswg-drafts
URL: https://drafts.csswg.org/css-gaps-1/
TR: https://www.w3.org/TR/css-gaps-1/
Editor: Kevin Babbitt, Microsoft, https://github.com/kbabbitt, w3cid 124689
Abstract: This module introduces several properties to add row and column gap decorations to container layout types such as grid and flex.
WPT Path Prefix: css/css-gaps/
WPT Display: open

urlPrefix: https://drafts.csswg.org/css-grid-3/; type: dfn; spec: CSS-GRID-3; text: masonry container

spec:css-color-5; type:type; text:

Introduction

Value Definitions

Gap decorations

			.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;
			}
		

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

Layout and painting

• The center of an intersection between a gap and the content edge of the container.
• The center of an intersection between gaps in different directions.

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

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

Breaking gap decorations into segments: The 'column-rule-break', 'row-rule-break', and 'rule-break' properties

		Name: column-rule-break, row-rule-break
		Value: ''none'' | ''spanning-item'' | ''intersection''
		Initial: ''spanning-item''
		Applies to: grid containers, flex containers, multicol containers, and masonry containers
		Inherited: no
		Animation type: discrete
	

none

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.

spanning-item

Gap decorations start and end at visible "T" intersections but continue through visible "cross" intersections.

intersection

Gap decorations start and end at visible "T" and "cross" intersections.

		Name: rule-break
		Value: <<'column-rule-break'>>
		Applies to: Same as 'column-rule-break' and 'row-rule-break'
	

Pairing gap intersection points into segments

In the context of a given |gap|, a pair of gap intersection points |a| and |b| is considered discontiguous if a line segment from |a| to |b|, with the same width as |gap|, intersects a child item in the container. Note: The primary use case for this definition is to avoid having gap decorations intersect spanning items when not intended by the author, for example when a spanning item touches the edge of the container, or when a spanning item forms a "T intersection". However, the specific phrasing of the definition is also intended to address cases such as the one below:

The four marked gap intersection points fall along a common gap centerline. However, because item 3 is slightly wider than items 1 and 5, the second and third points from the top are discontiguous. Thus, the two upper gap intersection points form a pair, and the two lower gap intersection points form a pair. (There is an additional pair of gap intersection points, slightly offset to the right of the two middle points, which are not marked. These points will form another pair.)

			.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;
				rule-outset: 0px;
			}
		

			.break-spanning-item-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: spanning-item;
				rule-outset: 0px;
			}
		

			.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;
				rule-outset: 0px;
			}
		

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

			.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;
				rule-outset: 0px;
			}
		

Adjusting gap decoration endpoints: The 'column-rule-outset', 'row-rule-outset', and 'rule-outset' properties

		Name: column-rule-outset, row-rule-outset
		Value: <>
		Initial: ''50%''
		Applies to: grid containers, flex containers, multicol containers, and masonry containers
		Inherited: no
		Percentages: refer to the crossing gap width
		Animation type: by computed value type
	

		Name: rule-outset
		Value: <<'column-rule-outset'>>
		Applies to: Same as 'column-rule-outset' and 'row-rule-outset'
	

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

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

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

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

At the content edge of the container

The crossing gap width is ''0''.

At an intersection with another gap

The crossing gap width is the used value of the 'column-gap' or 'row-gap' property, whichever applies to the intersecting gap.

Gap decoration paint order: The 'rule-paint-order' property

		Name: rule-paint-order
		Value: row-over-column | column-over-row
		Initial: row-over-column
		Applies to: grid containers, flex containers, and masonry containers
		Inherited: no
		Animation type: discrete
	

			.row-over-coulumn {
				rule-paint-order: row-over-column;
				row-rule: 6px solid red;
				column-rule: 6px solid blue;
			}
		

			rule-paint-order: column-over-row;
			row-rule: 6px solid red;
			column-rule: 6px solid blue;
		

Color, style, and width

Gap decoration color: The 'column-rule-color' and 'row-rule-color' properties

		Name: column-rule-color, row-rule-color
		Value: <> | <>
		Initial: currentcolor
		Applies to: grid containers, flex containers, multicol containers, and masonry containers
		Inherited: no
		Animation type: by computed value type
	

		<line-color-list>          = [ <> ]+

		<auto-line-color-list>     = [ <> ]*
									               <>
									               [ <> ]*

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

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

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

<>

Sets the color of gap decorations.

Gap decoration style: The 'column-rule-style' and 'row-rule-style' properties

		Name: column-rule-style, row-rule-style
		Value: <> | <>
		Initial: none
		Applies to: grid containers, flex containers, multicol containers, and masonry containers
		Inherited: no
		Animation type: discrete
	

		<line-style-list>          = [ <> ]+

		<auto-line-style-list>     = [ <> ]*
									               <>
									               [ <> ]*

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

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

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

		Name: column-rule-width, row-rule-width
		Value: <> | <>
		Initial: medium
		Applies to: grid containers, flex containers, multicol containers, and masonry containers
		Inherited: no
		Computed value: list of absolute lengths, snapped as a border width, or ''0'' under conditions described below
		Animation type: by computed value type
	

		<line-width-list>          = [ <> ]+

		<auto-line-width-list>     = [ <> ]*
									               <>
									               [ <> ]*

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

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

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

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

		repeat( [ <> | auto ] , <value>+ )
	

		Name: column-rule, row-rule
		Value: <> | <>
	

		<gap-rule-list>        = <>#

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

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

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

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

		<gap-rule>             = <> || <> || <>
	

		Name: rule-color
		Value: <<'column-rule-color'>>
		Inherited: no
		Applies to: Same as 'column-rule-color' and 'row-rule-color'
	

		Name: rule-style
		Value: <<'column-rule-style'>>
		Inherited: no
		Applies to: Same as 'column-rule-style' and 'row-rule-style'
	

		Name: rule-width
		Value: <<'column-rule-width'>>
		Inherited: no
		Applies to: Same as 'column-rule-width' and 'row-rule-width'
	

		Name: rule
		Value: <<'column-rule'>>
		Inherited: no
		Applies to: Same as 'column-rule' and 'row-rule'