Skip to content

Commit 3666d49

Browse files
committed
[css-grid-3][masonry] Define dense packing for masonry #9326
1 parent 79a964a commit 3666d49

File tree

1 file changed

+28
-0
lines changed

1 file changed

+28
-0
lines changed

css-grid-3/Overview.bs

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -817,6 +817,20 @@ Placement Precision: the 'item-tolerance' property</h3>
817817
see <a href='https://github.com/w3c/csswg-drafts/issues/3071'>discussions</a>
818818
on how that might work.
819819

820+
<h3 id="masonry-dense-packing">
821+
Dense Placement: the ''item-pack/dense'' keyword</h3>
822+
823+
In [=grid layout=], ''grid-auto-flow: dense'' allows backtracking
824+
during the [[css-grid-2#auto-placement-algo|grid item placement algorithm]].
825+
The ''item-pack/dense'' keyword similarly allows backtracking
826+
during the [[#masonry-layout-algorithm|masonry placement algorithm]].
827+
However, because masonry placement and sizing are intertwined,
828+
an item can only backtrack into a compatible empty slot if
829+
the total used size of that slot’s tracks
830+
matches the used size of the item’s normal-placement tracks.
831+
832+
Note: This restriction avoids laying out the item more than once.
833+
820834
<h3 id="masonry-layout-algorithm">
821835
Masonry Layout and Placement Algorithm</h3>
822836

@@ -860,6 +874,18 @@ Masonry Layout and Placement Algorithm</h3>
860874
and then layout the item.
861875
Set the [=running position=] of the spanned [=grid axis=] tracks
862876
to <code><var>max_pos</var> + [=outer size=] + 'grid-gap'</code>.
877+
878+
<li>
879+
If the [=masonry container=] uses ''item-pack/dense'' packing,
880+
and there exists skipped empty space (e.g. due to spanning items)
881+
earlier in the layout into which the item, as it is sized now,
882+
could have fit without impacting other items’ placement
883+
if it were earlier in the placement order,
884+
and the tracks it would have spanned at that point
885+
have the same total used size as the tracks into which it is currently placed,
886+
move the item into that position
887+
and rewind the [=auto-placement cursor=] and the [=running position=]
888+
to their values before this item’s placement.
863889
</ol>
864890

865891
Note: This algorithm chooses the track
@@ -1495,6 +1521,8 @@ Recent Changes</h3>
14951521
and gave it an initial value of ''item-tolerance/normal''.
14961522
(<a href="https://github.com/w3c/csswg-drafts/issues/10884">Issue 10884</a>,
14971523
<a href="https://github.com/w3c/csswg-drafts/issues/12111">Issue 12111</a>)
1524+
* Defined [[#masonry-dense-packing|dense packing]] for [=masonry layout=].
1525+
(<a href="https://github.com/w3c/csswg-drafts/issues/9326">Issue 9326</a>)
14981526
* Tweak baseline alignment to export the highest/lowest among the first/last items of every track.
14991527
(<a href="https://github.com/w3c/csswg-drafts/issues/9530">Issue 9530</a>)
15001528

0 commit comments

Comments
 (0)