[css-grid-3][masonry] Handling negative margins and dense packing for baseline calculation in the masonry axis

[yanlingwang23]

Following up on #9530 , a key question arises when working in the container level baseline in the masonry axis: How should cases be handled where an item is moved to a higher position within the container either via negative margins or via dense packing? Specifically, how should such an item be considered in the container-level baseline calculation?

Example Scenario:

Consider the following cases:

Example 1:

Item 1 has a negative margin-bottom, causing Item 3 to be positioned above it. Should Item 1 or Item 3 be treated as the first baseline in the track?
If it’s based on the order items are placed in, it would be Item 1. If it’s based on where they are positioned, it would be Item 3.
Note that in a multicolumn layout, Item 1 is treated as the first baseline in the track, based on the order in which items are placed.

Example 2:

• Without dense packing, Item 2 is the first baseline candidate in tracks 2 and 3.
• With dense packing, Item 3 is placed above Item 2. In this case, which should be the first baseline candidate in track 3: Item 3 or Item 2?
  If it’s based on the order items are placed in, it would be Item 2. If it’s based on where they are positioned, it would be Item 3.

Example 3:

• Item 5 has a negative margin-top.
• Without dense packing, Item 2 would serve as the first baseline candidate in this track.
• With dense packing, however, Item 5 is repositioned above Item 2 due to its negative margin.

This raises the question: Should Item 5 now be treated as the first baseline candidate in this track?

Approaches to Handling Dense Packing and Baseline Calculation

1. Ignore cases involving dense packing

One approach is to disregard situations involving dense packing. For example, when calculating the first baseline, if a later item is moved to an earlier position and becomes the first item in a track, this item would still be considered lower than the first items in other tracks. In other words, first baseline candidates are determined by the order items are placed in rather than where in the track they are placed. The same approach applies to last baseline calculations.
If we decide to do with this approach, then that fixes the problem ran into with negative margins because instead of looking at offsets, we would now only care about the order items are processed in.

2. Do not ignore cases involving dense packing

Alternatively, two options are available if dense packing cases are not ignored:

• Option 1: Always use the visually highest or lowest item (with a usable baseline) as the first or last baseline candidate in a track. This would apply to dense packing and cases with negative margins. With this approach, item 5 in the third example above would be treated as first baseline candidate.
• Option 2: Follow the resolution of the issue regarding #13164/Effect of negative bottom margins on running position + dense-packing