Skip to content

Commit f7a045a

Browse files
committed
[css-grid-3][masonry] Define handling of subgrids for track sizing. #10053
1 parent b9dee54 commit f7a045a

File tree

1 file changed

+19
-7
lines changed

1 file changed

+19
-7
lines changed

css-grid-3/Overview.bs

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -570,6 +570,9 @@ Subgrids</h3>
570570
results in the subgrid getting [=masonry layout=] in its [=inline axis=].
571571
</div>
572572

573+
A [=subgrid=] that is a [=masonry container=]
574+
can be referred to as a <dfn export>submasonry</dfn>.
575+
573576
<h3 id="repeat-notation">
574577
Track Repetition: the ''repeat()'' notation</h3>
575578

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

635-
ISSUE(10053): Subgrids need special handling in order to avoid excessive performance costs.
636-
637-
638638
<div class="example">
639639
For example, suppose there are two columns in the [=grid axis=]
640640
and that
@@ -678,6 +678,20 @@ Grid Axis Track Sizing</h3>
678678
or all items are the same size
679679
(or matching multiples of that size, in the case of spanning items).
680680

681+
<h4 id="track-sizing-subgrid">
682+
Subgrid Item Contributions</h4>
683+
684+
When sizing the tracks of either a regular [=grid container=] or a [=masonry container=],
685+
a [=submasonry=] has special handling of items that have an [=automatic grid position=]:
686+
* Any such item is placed into every possible grid track
687+
that could be spanned by the [=submasonry=].
688+
(If the submasonry has a [=definite grid position=], thus only the spanned tracks;
689+
if it has an [=automatic grid position=], then all tracks in the parent grid.)
690+
* Any such item receives the largest margin/border/padding contribution
691+
of each edge at which it could hypothetically be placed.
692+
If the item spans the entire subgrid, it receives both.
693+
(See <a href="https://www.w3.org/TR/css-grid-2/#subgrid-item-contribution">CSS Grid Layout &sect;9</a>.)
694+
681695
<h4 id="track-sizing-performance">
682696
Optimized Track Sizing</h4>
683697

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

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

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

701-
ISSUE(10053): Subgrids need special handling in order to avoid excessive performance costs.
702-
703715
<li>
704716
For each [=item group=], synthesize a <dfn>virtual masonry item</dfn>
705717
that has the maximum of every intrinsic size contribution

0 commit comments

Comments
 (0)