From e647c1aa4af4abfba730ba32b25413e38b4f6ed8 Mon Sep 17 00:00:00 2001
From: fantasai
Date: Mon, 15 Sep 2025 21:32:28 -0400
Subject: [PATCH] [css-grid-3][masonry] Define dense packing for masonry #9326
---
css-grid-3/Overview.bs | 28 ++++++++++++++++++++++++++++
1 file changed, 28 insertions(+)
diff --git a/css-grid-3/Overview.bs b/css-grid-3/Overview.bs
index a060a0131ed..1ae00dc18ce 100644
--- a/css-grid-3/Overview.bs
+++ b/css-grid-3/Overview.bs
@@ -830,6 +830,20 @@ Placement Precision: the 'item-tolerance' property
see discussions
on how that might work.
+
+Dense Placement: the ''item-pack/dense'' keyword
+
+ In [=grid layout=], ''grid-auto-flow: dense'' allows backtracking
+ during the [[css-grid-2#auto-placement-algo|grid item placement algorithm]].
+ The ''item-pack/dense'' keyword similarly allows backtracking
+ during the [[#masonry-layout-algorithm|masonry placement algorithm]].
+ However, because masonry placement and sizing are intertwined,
+ an item can only backtrack into a compatible empty slot if
+ the total used size of that slot’s tracks
+ matches the used size of the item’s normal-placement tracks.
+
+ Note: This restriction avoids laying out the item more than once.
+
Masonry Layout and Placement Algorithm
@@ -873,6 +887,18 @@ Masonry Layout and Placement Algorithm
and then layout the item.
Set the [=running position=] of the spanned [=grid axis=] tracks
to max_pos + [=outer size=] + 'grid-gap'.
+
+
+ If the [=masonry container=] uses ''item-pack/dense'' packing,
+ and there exists skipped empty space (e.g. due to spanning items)
+ in the layout into which the item, as it is sized now,
+ could have fit without impacting other items’ placement
+ if it were earlier in the placement order,
+ and the tracks it would have spanned at that point
+ have the same total used size as the tracks into which it is currently placed,
+ move the item into the earliest such position
+ and rewind the [=auto-placement cursor=] and the [=running position=]
+ to their values before this item’s placement.
Note: This algorithm chooses the track
@@ -1510,6 +1536,8 @@ Recent Changes
Issue 12111)
* Added a placeholder for a [=masonry layout=] 'display' value.
(Issue 12022)
+ * Defined [[#masonry-dense-packing|dense packing]] for [=masonry layout=].
+ (Issue 9326)
* Tweak baseline alignment to export the highest/lowest among the first/last items of every track.
(Issue 9530)