Skip to content

[css-grid-1][css-grid-2] Clarify that Grid can fragment within rows #13870 #13871

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
fantasai wants to merge 1 commit into
base: main
Choose a base branch
from
Open

[css-grid-1][css-grid-2] Clarify that Grid can fragment within rows #13870 #13871

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 35 additions & 9 deletions css-grid-1/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4634,7 +4634,7 @@ Fragmenting Grid Layout</h2>
<p>
<a>Grid containers</a> can break across pages
between rows or columns
and inside items.
as well as within rows and inside items.
The <a property lt="break-before">break-*</a> properties apply to grid containers
as normal for the formatting context in which they participate.
This section defines how they apply to grid items
Expand All @@ -4644,7 +4644,7 @@ Fragmenting Grid Layout</h2>
The following breaking rules refer to the <a>fragmentation container</a> as the “page”.
The same rules apply in any other <a>fragmentation context</a>.
(Substitute “page” with the appropriate <a>fragmentation container</a> type as needed.)
See the <a href="http://www.w3.org/TR/css-break/">CSS Fragmentation Module</a> [[!CSS3-BREAK]].
See the <a href="http://www.w3.org/TR/css-break/">CSS Fragmentation Module</a> [[!CSS-BREAK-3]].

<p>
The exact layout of a fragmented grid container is not defined in this level of Grid Layout.
Expand All @@ -4659,15 +4659,32 @@ Fragmenting Grid Layout</h2>
are propagated to the grid container.

<li>
A forced break inside a grid item effectively increases the size of its contents;
it does not trigger a forced break inside sibling items.

<li>
<a href="https://www.w3.org/TR/css3-break/#btw-blocks">Class A break opportunities</a> occur
<a href="https://www.w3.org/TR/css-break/#btw-blocks">Class A break opportunities</a> occur
between rows or columns (whichever is in the appropriate axis),
and <a href="https://www.w3.org/TR/css3-break/#end-block">Class C break opportunities</a> occur
and <a href="https://www.w3.org/TR/css-break/#end-block">Class C break opportunities</a> occur
between the first/last row (column) and the grid container's content edges.
[[!CSS3-BREAK]]
[[!CSS-BREAK-3]]

<li>
A grid track may be fragmented
by fragmenting all items in the track at that point
Copy link
Copy Markdown
Collaborator

@alisonmaher alisonmaher Apr 30, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Items may not actually be fragmented as a result. For example, say you have a definite row size of 50px and all items in the row are 25px. If say your fragmentainer has a block size of 40px, the row fragments, but the items remain unfragmented. (Technically in this case, implementation-wise it would be the container breaking (since rows don't create fragments themselves), but we can think of it as the row being fragmented).

In another example, say your row is definitely sized to 25px but your item is 50px, the item will fragment, but your row will not (and the item will overflow the row as usual).

Also, if an item had a forced break before the fragmentainer boundary, it may have broken at an earlier point than the row would have.

So to summarize, item fragmentation is technically independent of the row. If a row is intrinsically sized, though, the breaking of items can impact the breaking of a row.

I'm thinking perhaps we'll need to word this in a way that is separated from items. Maybe something along the lines of "A grid track may fragment, similar to a grid item, if its block size does not fit within the fragmentainer boundary. Fragmentation breaks within a grid item..."

in accordance with their own fragmentation constraints
(including consideration of 'break-inside' on the items themselves).
Fragmentation breaks within a grid item
effectively increase the size of its content,
and can thereby increase the effective size of the track
(and consequently the size of other items in the track).

It is undefined to what extent such changes in the size of the track
impact the sizes of other tracks and/or the grid container itself;
however the UA should avoid causing overflow.

A forced break inside a grid item affects only that item;
it does not trigger a parallel forced break
inside the contents of sibling items.
But it can cause fragmentation of sibling items
by stretching them across the break
through its impact on the size of its row(s).

<li>
When a grid container is continued after a break,
Expand Down Expand Up @@ -4788,6 +4805,15 @@ Changes</h2>

This section documents the changes since previous publications.

<h3 id="changes-202503">
Changes since the <a href="https://www.w3.org/TR/2025/CRD-css-grid-1-20250326/">26 March 2025 CRD</a></h3>

<ul clsas="non-normative">
<li id="change-2025-fragment-rows">
Clarified how tracks and items within tracks fragment.
(<a href="https://github.com/w3c/csswg-drafts/issues/13870">Issue 13870</a>)
</ul>

<h3 id="changes-202012">
Changes since the <a href="https://www.w3.org/TR/2020/CRD-css-grid-1-20201218/">18 December 2020 CR</a></h3>

Expand Down
44 changes: 35 additions & 9 deletions css-grid-2/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5327,7 +5327,7 @@ Fragmenting Grid Layout</h2>
<p>
<a>Grid containers</a> can break across pages
between rows or columns
and inside items.
as well as within rows and inside items.
The <a property lt="break-before">break-*</a> properties apply to grid containers
as normal for the formatting context in which they participate.
This section defines how they apply to grid items
Expand All @@ -5337,7 +5337,7 @@ Fragmenting Grid Layout</h2>
The following breaking rules refer to the <a>fragmentation container</a> as the “page”.
The same rules apply in any other <a>fragmentation context</a>.
(Substitute “page” with the appropriate <a>fragmentation container</a> type as needed.)
See the <a href="http://www.w3.org/TR/css-break/">CSS Fragmentation Module</a> [[!CSS3-BREAK]].
See the <a href="http://www.w3.org/TR/css-break/">CSS Fragmentation Module</a> [[!CSS-BREAK-3]].

<p>
The exact layout of a fragmented grid container is not defined in this level of Grid Layout.
Expand All @@ -5352,15 +5352,32 @@ Fragmenting Grid Layout</h2>
are propagated to the grid container.

<li>
A forced break inside a grid item effectively increases the size of its contents;
it does not trigger a forced break inside sibling items.

<li>
<a href="https://www.w3.org/TR/css3-break/#btw-blocks">Class A break opportunities</a> occur
<a href="https://www.w3.org/TR/css-break/#btw-blocks">Class A break opportunities</a> occur
between rows or columns (whichever is in the appropriate axis),
and <a href="https://www.w3.org/TR/css3-break/#end-block">Class C break opportunities</a> occur
and <a href="https://www.w3.org/TR/css-break/#end-block">Class C break opportunities</a> occur
between the first/last row (column) and the grid container's content edges.
[[!CSS3-BREAK]]
[[!CSS-BREAK-3]]

<li>
A grid track may be fragmented
by fragmenting all items in the track at that point
in accordance with their own fragmentation constraints
(including consideration of 'break-inside' on the items themselves).
Fragmentation breaks within a grid item
effectively increase the size of its content,
and can thereby increase the effective size of the track
(and consequently the size of other items in the track).

It is undefined to what extent such changes in the size of the track
impact the sizes of other tracks and/or the grid container itself;
however the UA should avoid causing overflow.

A forced break inside a grid item affects only that item;
it does not trigger a parallel forced break
inside the contents of sibling items.
But it can cause fragmentation of sibling items
by stretching them across the break
through its impact on the size of its row(s).

<li>
When a grid container is continued after a break,
Expand Down Expand Up @@ -5438,6 +5455,15 @@ Security Considerations {#security}
<h2 id="changes">
Changes</h2>

<h3 id="changes-202503">
Changes since the <a href="https://www.w3.org/TR/2025/CRD-css-grid-2-20250326/">26 March 2025 CRD</a></h3>

<ul clsas="non-normative">
<li id="change-2025-fragment-rows">
Clarified how tracks and items within tracks fragment.
(<a href="https://github.com/w3c/csswg-drafts/issues/13870">Issue 13870</a>)
</ul>

<h3 id="changes-202012">
Changes since the <a href="https://www.w3.org/TR/2020/CRD-css-grid-2-20201218/">18 December 2020 CR</a></h3>

Expand Down