Skip to content

Commit

Permalink
[css-grid-3][masonry] Define handling of subgrids for track sizing. #…
Browse files Browse the repository at this point in the history
  • Loading branch information
fantasai committed Sep 6, 2024
1 parent b9dee54 commit f7a045a
Showing 1 changed file with 19 additions and 7 deletions.
26 changes: 19 additions & 7 deletions css-grid-3/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -570,6 +570,9 @@ Subgrids</h3>
results in the subgrid getting [=masonry layout=] in its [=inline axis=].
</div>

A [=subgrid=] that is a [=masonry container=]
can be referred to as a <dfn export>submasonry</dfn>.

<h3 id="repeat-notation">
Track Repetition: the ''repeat()'' notation</h3>

Expand Down Expand Up @@ -632,9 +635,6 @@ Grid Axis Track Sizing</h3>
* All items with an [=automatic grid position=] contribute
(regardless of whether they are ultimately placed in that track).

ISSUE(10053): Subgrids need special handling in order to avoid excessive performance costs.


<div class="example">
For example, suppose there are two columns in the [=grid axis=]
and that
Expand Down Expand Up @@ -678,6 +678,20 @@ Grid Axis Track Sizing</h3>
or all items are the same size
(or matching multiples of that size, in the case of spanning items).

<h4 id="track-sizing-subgrid">
Subgrid Item Contributions</h4>

When sizing the tracks of either a regular [=grid container=] or a [=masonry container=],
a [=submasonry=] has special handling of items that have an [=automatic grid position=]:
* Any such item is placed into every possible grid track
that could be spanned by the [=submasonry=].
(If the submasonry has a [=definite grid position=], thus only the spanned tracks;
if it has an [=automatic grid position=], then all tracks in the parent grid.)
* Any such item receives the largest margin/border/padding contribution
of each edge at which it could hypothetically be placed.
If the item spans the entire subgrid, it receives both.
(See <a href="https://www.w3.org/TR/css-grid-2/#subgrid-item-contribution">CSS Grid Layout &sect;9</a>.)

<h4 id="track-sizing-performance">
Optimized Track Sizing</h4>

Expand All @@ -691,15 +705,13 @@ Optimized Track Sizing</h4>
Separate all the [=masonry items=] into <dfn>item groups</dfn>, according to the following properties:

* the span of the item
* the placement of the item, i.e. whether it an [=automatic grid position=], or a [=definite grid position=]--
and if so, what that definite position is
* the placement of the item,
i.e. which tracks it is allowed to be placed in
* the item's [=baseline-sharing group=]

Note: For example, an item with span 2 placed in the second track
will be in a different group than an item with span 2 that has an [=automatic grid position=].

ISSUE(10053): Subgrids need special handling in order to avoid excessive performance costs.

<li>
For each [=item group=], synthesize a <dfn>virtual masonry item</dfn>
that has the maximum of every intrinsic size contribution
Expand Down

0 comments on commit f7a045a

Please sign in to comment.