New pages: rule-break properties by estelle · Pull Request #45095 · mdn/content

estelle · 2026-08-11T22:51:48Z

This PR includes the creation of three new reference pages:

row-rule-break
column-rule-break
rule-break shorthand

Spec: https://drafts.csswg.org/css-gaps-1/#break
The CSS gaps module page is already live.

Part of openwebdocs/project#238

github-actions · 2026-08-11T22:53:24Z

Preview URLs (3 pages)

Flaws (9)

Found an unexpected or unresolvable flaw? Please report it here.

URL: /en-US/docs/Web/CSS/Reference/Properties/column-rule-break
Title: column-rule-break CSS property
Flaw count: 4

macros:
- Macro cssxref produces link /en-US/docs/Web/CSS/column-rule-inset which doesn't resolve
- Macro cssxref produces link /en-US/docs/Web/CSS/rule-overlap which doesn't resolve
- Macro cssxref produces link /en-US/docs/Web/CSS/rule-inset which doesn't resolve
- Macro cssxref produces link /en-US/docs/Web/CSS/rule-overlap which doesn't resolve

URL: /en-US/docs/Web/CSS/Reference/Properties/row-rule-break
Title: row-rule-break CSS property
Flaw count: 3

macros:
- Macro cssxref produces link /en-US/docs/Web/CSS/row-rule-inset which doesn't resolve
- Macro cssxref produces link /en-US/docs/Web/CSS/rule-inset which doesn't resolve
- Macro cssxref produces link /en-US/docs/Web/CSS/rule-overlap which doesn't resolve

URL: /en-US/docs/Web/CSS/Reference/Properties/rule-break
Title: rule-break CSS property
Flaw count: 2

macros:
- Macro cssxref produces link /en-US/docs/Web/CSS/rule-inset which doesn't resolve
- Macro cssxref produces link /en-US/docs/Web/CSS/rule-overlap which doesn't resolve

(comment last updated: 2026-08-12 17:41:43)

estelle · 2026-08-12T17:51:51Z

I think i got everything. thanks for the review.

chrisdavidmills

Nice work, @estelle. I've been through all of the pages now, and given them a good review.

chrisdavidmills · 2026-08-13T10:58:08Z

+
+{{SeeCompatTable}}
+
+The **`column-rule-break`** [CSS](/en-US/docs/Web/CSS) property sets the behavior for breaking column rules within a given column gap into segments wherever column rules intersect row gaps.


I'm still not sure about the "within a given column gap" wording — it sounds like you are saying that you can specify the breaking behavior for a single specific gap, but that is not the case.

Wouldn't the following be clearer?

Suggested change

The **`column-rule-break`** [CSS](/en-US/docs/Web/CSS) property sets the behavior for breaking column rules within a given column gap into segments wherever column rules intersect row gaps.

The **`column-rule-break`** [CSS](/en-US/docs/Web/CSS) property sets the behavior for breaking column rules into segments wherever column rules intersect row gaps.

chrisdavidmills · 2026-08-13T11:00:18Z

+
+## Description
+
+The `column-rule-break` property sets the behavior for whether or not to break column rules into segments when they cross row gaps.


Suggested change

The `column-rule-break` property sets the behavior for whether or not to break column rules into segments when they cross row gaps.

The `column-rule-break` property specifies whether or not to break column rules into segments when they cross row gaps.

Sounded a bit awkward

chrisdavidmills · 2026-08-13T11:02:51Z

+
+Column rules are painted within a column gap as one or more segments, with segments occurring between adjacent grid items in separate columns, between flex items or flex lines in flex layouts depending on the `flex-direction`, or between columns in multi-col layouts.
+
+The `column-rule-break` property only determines if the break occurs. By default, the break between column rule segments is the width of the row gap, as each segments starts and ends at the edge of the gap (or edge of the container). If the row gap is `0`, this break may not be visible. The end positions can be controlled with the {{cssxref("column-rule-inset")}} properties.


Suggested change

The `column-rule-break` property only determines if the break occurs. By default, the break between column rule segments is the width of the row gap, as each segments starts and ends at the edge of the gap (or edge of the container). If the row gap is `0`, this break may not be visible. The end positions can be controlled with the {{cssxref("column-rule-inset")}} properties.

The `column-rule-break` property only determines if the break occurs. By default, the break between column rule segments is the height of the row gap, as each segment starts and ends at the edge of the gap (or edge of the container). If the row gap is `0`, this break may not be visible. The end positions can be controlled with the {{cssxref("column-rule-inset")}} properties.

chrisdavidmills · 2026-08-13T11:04:50Z

+
+{{EmbedLiveSample("grid containers", "", "240")}}
+
+By default, there are no column rule breaks. Check the checkbox to set the `column-rule-break` to `intersection`, which makes the otherwise continuous rules break at every "cross" intersection. By default, the break between segments is the width of the {{cssxref("row-gap")}}, which was set to `20px` in this case.


Suggested change

By default, there are no column rule breaks. Check the checkbox to set the `column-rule-break` to `intersection`, which makes the otherwise continuous rules break at every "cross" intersection. By default, the break between segments is the width of the {{cssxref("row-gap")}}, which was set to `20px` in this case.

By default, there are no column rule breaks. Check the checkbox to set the `column-rule-break` to `intersection`, which makes the otherwise continuous rules break at every "cross" intersection. By default, the break between segments is the height of the {{cssxref("row-gap")}}, which was set to `20px` in this case.

chrisdavidmills · 2026-08-13T11:10:21Z

+
+### Flex containers
+
+In flexbox, by default, gap rules between flex items span the item only while gap rules between flex lines are continuous. Therefore, whether the column rules break at every row gap by default depends on the `flex-direction`. In horizontal writing modes, when set to `row` or `row-reverse`, the column rule breaks at every row gap, equivalent to `column-rule-break: intersection`. When the `flex-direction` is `column` or `column-reverse`, the column rule is continuous by default, equivalent to `column-rule-break: none`.


I am still not sure what the first sentence means. How about removing it, and just sticking with this:

Suggested change

In flexbox, by default, gap rules between flex items span the item only while gap rules between flex lines are continuous. Therefore, whether the column rules break at every row gap by default depends on the `flex-direction`. In horizontal writing modes, when set to `row` or `row-reverse`, the column rule breaks at every row gap, equivalent to `column-rule-break: intersection`. When the `flex-direction` is `column` or `column-reverse`, the column rule is continuous by default, equivalent to `column-rule-break: none`.

In flexbox, whether the column rules break at every row gap by default depends on the `flex-direction` (the following assumes a horizontal writing mode):

- When it is set to `row` or `row-reverse`, the column rule breaks at every row gap, equivalent to `column-rule-break: intersection`.

- When it is set to `column` or `column-reverse`, the column rule is continuous by default, equivalent to `column-rule-break: none`.

chrisdavidmills · 2026-08-13T14:31:58Z

+
+### Multi-col containers
+
+In multi-col containers, the default `normal` behavior differs between row rules and column rules. On `column-rule-break`, gap rule segments start and end when they intersect a row gap, behaving as `column-rule-break: intersection`, while row rules don't breaks, with `row-rule-break` behaving the same as `none`.


Suggested change

In multi-col containers, the default `normal` behavior differs between row rules and column rules. On `column-rule-break`, gap rule segments start and end when they intersect a row gap, behaving as `column-rule-break: intersection`, while row rules don't breaks, with `row-rule-break` behaving the same as `none`.

In multi-col containers, the default `normal` behavior differs between row rules and column rules. Column rule segments start and end when they intersect a row gap, behaving as `column-rule-break: intersection`, while row rules don't break when they intersect a column gap, behaving as `row-rule-break: none`.

chrisdavidmills · 2026-08-13T14:34:40Z

+<fieldset>
+  <legend>Set <code>rule-break:</code></legend>
+  <label
+    ><input type="radio" name="break" value="none" /> <code>none</code></label


Same question as on the other pages — why radio buttons instead of a single checkbox?

chrisdavidmills · 2026-08-13T14:36:23Z

+
+### Basic usage
+
+In this example, we use the `rule-break` property to break each rule segment in a grid container so no rules intersects


Suggested change

In this example, we use the `rule-break` property to break each rule segment in a grid container so no rules intersects

In this example, we use the `rule-break` property to break each rule segment in a grid container so no rules intersect.

chrisdavidmills · 2026-08-13T14:38:19Z

+</ul>
+<p>
+  <label
+    >Change the width of the column gap.


As with column-rule-break, can we put the form control at the top of the example? Much better for usability.

chrisdavidmills · 2026-08-13T14:40:22Z

+
+#### Result
+
+{{EmbedLiveSample("Basic", "", "510")}}


Increase the height of the embedded demo slightly to get rid of the vertical scrollbar.

New pages: rule-break properties

55899c5

estelle requested a review from a team as a code owner August 11, 2026 22:51

estelle requested review from chrisdavidmills and removed request for a team August 11, 2026 22:51

github-actions Bot added Content:CSS Cascading Style Sheets docs size/xl [PR only] >1000 LoC changed labels Aug 11, 2026

estelle mentioned this pull request Aug 11, 2026

CSS Gaps 1 openwebdocs/project#238

Open

66 tasks

This comment was marked as resolved.

Sign in to view

estelle and others added 5 commits August 12, 2026 08:17

Merge branch 'main' into gaps12-rule-breaks

c8bdfd0

edits per review

a4672cb

move slider for column to prevent bounce

fdab4d4

move slider for column to prevent bounce

9ec49ba

relevant rule is darker rule

6560b06

estelle requested a review from chrisdavidmills August 12, 2026 17:51

chrisdavidmills requested changes Aug 13, 2026

View reviewed changes

This comment was marked as duplicate.

Sign in to view


		{{SeeCompatTable}}

		The `column-rule-break` [CSS](/en-US/docs/Web/CSS) property sets the behavior for breaking column rules within a given column gap into segments wherever column rules intersect row gaps.


		## Description

		The `column-rule-break` property sets the behavior for whether or not to break column rules into segments when they cross row gaps.

	The `column-rule-break` property sets the behavior for whether or not to break column rules into segments when they cross row gaps.
	The `column-rule-break` property specifies whether or not to break column rules into segments when they cross row gaps.


		Column rules are painted within a column gap as one or more segments, with segments occurring between adjacent grid items in separate columns, between flex items or flex lines in flex layouts depending on the `flex-direction`, or between columns in multi-col layouts.

		The `column-rule-break` property only determines if the break occurs. By default, the break between column rule segments is the width of the row gap, as each segments starts and ends at the edge of the gap (or edge of the container). If the row gap is `0`, this break may not be visible. The end positions can be controlled with the {{cssxref("column-rule-inset")}} properties.


		{{EmbedLiveSample("grid containers", "", "240")}}

		By default, there are no column rule breaks. Check the checkbox to set the `column-rule-break` to `intersection`, which makes the otherwise continuous rules break at every "cross" intersection. By default, the break between segments is the width of the {{cssxref("row-gap")}}, which was set to `20px` in this case.


		### Flex containers

		In flexbox, by default, gap rules between flex items span the item only while gap rules between flex lines are continuous. Therefore, whether the column rules break at every row gap by default depends on the `flex-direction`. In horizontal writing modes, when set to `row` or `row-reverse`, the column rule breaks at every row gap, equivalent to `column-rule-break: intersection`. When the `flex-direction` is `column` or `column-reverse`, the column rule is continuous by default, equivalent to `column-rule-break: none`.

-In flexbox, by default, gap rules between flex items span the item only while gap rules between flex lines are continuous. Therefore, whether the column rules break at every row gap by default depends on the `flex-direction`. In horizontal writing modes, when set to `row` or `row-reverse`, the column rule breaks at every row gap, equivalent to `column-rule-break: intersection`. When the `flex-direction` is `column` or `column-reverse`, the column rule is continuous by default, equivalent to `column-rule-break: none`.
+In flexbox, whether the column rules break at every row gap by default depends on the `flex-direction` (the following assumes a horizontal writing mode):
+- When it is set to `row` or `row-reverse`, the column rule breaks at every row gap, equivalent to `column-rule-break: intersection`.
+- When it is set to `column` or `column-reverse`, the column rule is continuous by default, equivalent to `column-rule-break: none`.


		### Multi-col containers

		In multi-col containers, the default `normal` behavior differs between row rules and column rules. On `column-rule-break`, gap rule segments start and end when they intersect a row gap, behaving as `column-rule-break: intersection`, while row rules don't breaks, with `row-rule-break` behaving the same as `none`.


		### Basic usage

		In this example, we use the `rule-break` property to break each rule segment in a grid container so no rules intersects

Uh oh!

Conversation

estelle commented Aug 11, 2026

Uh oh!

github-actions Bot commented Aug 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

This comment was marked as resolved.

Uh oh!

estelle commented Aug 12, 2026

Uh oh!

chrisdavidmills left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

This comment was marked as duplicate.

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

github-actions Bot commented Aug 11, 2026 •

edited

Loading