Re: [csswg-drafts] [css-grid-3][masonry] Reordering threshold (#9328)

> among all the columns within slack distance of the shortest column, place in the startmost

As argued in https://github.com/w3c/csswg-drafts/issues/10232#issuecomment-2072636648, this doesn't seem right.
Let's say we have 4 columns, we use a threshold of 75px, and we have a bunch of items which are all 30px tall. Then:
1. Column sizes are `0px 0px 0px 0px`, the shortest is 0px. We place the 1st item into the 1st column, since it's the startmost column within the threshold `<= 0px + 75px`.
2. Column sizes are `30px 0px 0px 0px`, the shortest is 0px. We place the 2nd item into the 1st column, since it's the startmost column within the threshold `<= 0px + 75px`.
3. Column sizes are `60px 0px 0px 0px`, the shortest is 0px. We place the 3rd item into the 1st column, since it's the startmost column within the threshold `<= 0px + 75px`.
4. Column sizes are `90px 0px 0px 0px`, the shortest is 0px. We place the 4th item into the 2nd column, since it's the startmost column within the threshold `<= 0px + 75px`.
5. Column sizes are `90px 30px 0px 0px`, the shortest is 0px. We place the 5th item into the 2nd column, since it's the startmost column within the threshold `<= 0px + 75px`.
6. ...

So it ends up being super weird:

| Col 1 | Col 2 | Col 3 | Col 4 |
| - | - | - | - |
| 1 | 4 | 7 | 10 |
| 2 | 5 | 8 | 14 |
| 3 | 6 | 9 | 18 |
| 11 | 12 | 13 |  |
| 15 | 16 | 17 |  |

I think it should actually be:
1. Let `x` be the last column that received an item, if any.
2. If there is no `x`, pick the first column and abort these steps.
3. Find the candidate columns within the threshold from the shortest one.
4. Pick the startmost candidate column that comes after `x` and abort these steps, if any.
5. Otherwise, pick the startmost candidate column.

| Col 1 | Col 2 | Col 3 | Col 4 |
| - | - | - | - |
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 |
| 16 | 17 | 18 |  |

Then `masonry-auto-flow: next` should be equivalent to `masonry-threshold: calc(1px / 0)`.

It would also match Firefox here (with the initial `masonry-threshold: 0px`):

```html
<style>
.grid {
  display: inline-grid;
  grid: masonry / repeat(3, 2ch);
  border: 1px solid;
  masonry-auto-flow: next;
}
item {
  border: 1px solid;
}
</style>
<div class="grid">
  <item style="grid-column: 2">1</item>
  <item>2</item>
  <item>3</item>
  <item>4</item>
</div>
```
![](https://github.com/w3c/csswg-drafts/assets/7477678/0b5f1771-656c-472e-92e0-8aa4e678129f)

Note that 2 goes into the 3rd column and 4 goes into the 2nd column, even though the 1st column is the startmost within the threshold.


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


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

Received on Wednesday, 24 April 2024 17:11:52 UTC