Re: [csswg-drafts] [css-grid-3] Masonry - Intrinsic sizing of tracks & masonry-grid doesn't produce to good/desirable results. (#8206)

First cut of trying to spec this...

1. Delete [Grid Item Placement section[(https://drafts.csswg.org/css-grid-3/#grid-item-placement).
2. Replace [Grid Axis Track Sizing section](https://drafts.csswg.org/css-grid-3/#track-sizing) as below.
3. Adjust [Masonry Layout Algorithm](https://drafts.csswg.org/css-grid-3/#masonry-layout-algorithm) as below.

### Grid Axis Track Sizing

Track sizing works the same as in [CSS Grid](https://drafts.csswg.org/css-grid-2/#algo-track-sizing), except that when considering which items contribute to intrinsic sizes:
* All items explicitly placed in that track contribute, and
* All items without an explicit placement contribute

In the case of spanning items with no explicit placement, they are assumed to be placed at every possible start position, and contribute accordingly.

**Example 1:** Suppose there are two columns in the grid axis and that
* Items A, B, and C have no explicit placement.
* Item D is explicitly placed into the first column.

In this case, items A, B, C, and D all contribute to sizing the first column, and A, B, and C (but not D) contribute to the second column.

**Example 2:** Suppose there are 5 columns in the grid axis, with the middle having a fixed size of 100px and the other two being auto-sized. An item that spans 2 tracks and has an intrinsic contribution of 220px is essentially copied and assumed to exist:
* At grid line 1, contributing 110px to each of the first two tracks.
* At grid line 2, contributing 120px to the second track.
* At grid line 3, contributing 120px to the fourth track.
* At grid line 4, contributing 110px to the fourth and fifth tracks.

**Note:** This algorithm ensures that each track is at least big enough to accommodate every item that is ultimately placed in it, and does not create dependency cycles between placement and track sizing. However, depending on the variation in sizes, tracks could be larger than necessary: an exact fit is only guaranteed if all items are explicitly placed in the grid axis or all items are the same size (or matching multiples of that size, in the case of spanning items).

### Masonry Layout Algorithm

Items are placed in order-modified document order, but items with a definite placement are placed before items with an indefinite position (as in regular grid layout).

For each of the tracks in the grid axis, keep a running position initialized to zero. First for each item with a definite placement in the grid axis, then for each item with an indefinite placement:

1. If the item has an definite placement in the grid axis, use that placement. Otherwise, resolve its grid axis placement using these substeps:
    1.  Starting at the first grid axis line in the implicit grid.
    2.  Find the largest running position of the grid axis tracks that the item would span if it were placed at this line, and call this position max_pos.
    3. Increment the line number and repeat step 2 until the item would no longer fit inside the grid.
    4.  Pick the line that resulted in the smallest max_pos as the item’s definite placement in the grid axis. 
2. Place the item in its grid axis tracks at the maximum of the running positions of the tracks it spans.
3. Calculate the size of the item’s containing block and then layout the item. Then calculate its resulting margin box in the masonry axis. Set the running position of the spanned grid axis tracks to max_pos + margin-box-end + grid-gap. 

-- 
GitHub Notification of comment by fantasai
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8206#issuecomment-1710169743 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 7 September 2023 13:38:12 UTC