Skip to content

Commit 1672b71

Browse files
committed
[css-grid-3][masonry] Define dense packing for masonry #9326
1 parent 7b8a3d4 commit 1672b71

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
@@ -834,6 +834,20 @@ Placement Precision: the 'item-tolerance' property</h3>
834834
see <a href='https://github.com/w3c/csswg-drafts/issues/3071'>discussions</a>
835835
on how that might work.
836836

837+
<h3 id="masonry-dense-packing">
838+
Dense Placement: the ''item-pack/dense'' keyword</h3>
839+
840+
In [=grid layout=], ''grid-auto-flow: dense'' allows backtracking
841+
during the [[css-grid-2#auto-placement-algo|grid item placement algorithm]].
842+
The ''item-pack/dense'' keyword similarly allows backtracking
843+
during the [[#masonry-layout-algorithm|masonry placement algorithm]].
844+
However, because masonry placement and sizing are intertwined,
845+
an item can only backtrack into a compatible empty slot if
846+
the total used size of that slot’s tracks
847+
matches the used size of the item’s normal-placement tracks.
848+
849+
Note: This restriction avoids laying out the item more than once.
850+
837851
<h3 id="masonry-layout-algorithm">
838852
Masonry Layout and Placement Algorithm</h3>
839853

@@ -877,6 +891,18 @@ Masonry Layout and Placement Algorithm</h3>
877891
and then layout the item.
878892
Set the [=running position=] of the spanned [=grid axis=] tracks
879893
to <code><var>max_pos</var> + [=outer size=] + 'grid-gap'</code>.
894+
895+
<li>
896+
If the [=masonry container=] uses ''item-pack/dense'' packing,
897+
and there exists skipped empty space (e.g. due to spanning items)
898+
in the layout into which the item, as it is sized now,
899+
could have fit without impacting other items’ placement
900+
if it were earlier in the placement order,
901+
and the tracks it would have spanned at that point
902+
have the same total used size as the tracks into which it is currently placed,
903+
move the item into the earliest such position
904+
and rewind the [=auto-placement cursor=] and the [=running position=]
905+
to their values before this item’s placement.
880906
</ol>
881907

882908
Note: This algorithm chooses the track
@@ -1514,6 +1540,8 @@ Recent Changes</h3>
15141540
<a href="https://github.com/w3c/csswg-drafts/issues/12111">Issue 12111</a>)
15151541
* Added a placeholder for a [=masonry layout=] 'display' value.
15161542
(<a href="https://github.com/w3c/csswg-drafts/issues/12022">Issue 12022</a>)
1543+
* Defined [[#masonry-dense-packing|dense packing]] for [=masonry layout=].
1544+
(<a href="https://github.com/w3c/csswg-drafts/issues/9326">Issue 9326</a>)
15171545
* Tweak baseline alignment to export the highest/lowest among the first/last items of every track.
15181546
(<a href="https://github.com/w3c/csswg-drafts/issues/9530">Issue 9530</a>)
15191547

0 commit comments

Comments
 (0)