Re: [csswg-drafts] [css-grid-3] Designer/developer feedback on masonry layout (#10233)

### Should it be part of CSS grid?
- yes, please
- good reasons already given here to not make it yet another display mode
- plus (to add a perspective): with masonry becoming an extra display mode it would need to define how it copes with right to left and top to bottom text flows etc, which adds complexity and potentially redundancy to grid

### Use subgrid, spanning, explicit placement, and combining different track sizes?
yes, super exciting!

### What might you do with it?
I imagine dashboard layouts in respect to the level of detail of the chart figures

### Are there things you want to do that you can’t do with this model?

#### Keep stacked elements order closer to markup source

I wonder how the proximity between elements could maybe improved now or later in regard to the original order of nodes (e.g images) in the markup. 
- Generally speaking I like the syntax idea of having a specifier along the lines of `grid-template-rows`, also because I can imagine how this alternatively can apply to `grid-template-columns` as well to shift the layout direction.
- In this regard, I like @desandro suggested naming `grid-template-rows: collapse`

Thinking further, `grid-template-rows: masonry(0)` could make it a CSS function, which uses the closest (zero) gap, while `grid-template-rows: masonry(1)` would always stack the next row next to former without any interference. Fractions between would work like a threshold of how big a relative gap has to be to make the next image populate the slot. In this example picture a threshold of ~0.2 would make image 6 and 7 change places (and sort of maintain a slightly better order in the sense of the given left to right flow). A threshold of ~0.5 would swap image 6 and 8 and keep 7 in place. Obviously this is just a draft here, experiments would need to validate how well this really works out. I share an idea here, which is still sketchy.

![masonry-threshold](https://github.com/w3c/csswg-drafts/assets/35312942/93d86c33-f58e-4a26-8a86-f0dc25d797e6)

I image such kind of control would also help further advance the newspaper examples.

#### Slicing the grid

A potential UX problem with masonry is, when content blocks don't stack up well or scrolling content becomes very long. The content block fitting keeps working technically speaking, but the relation to the actual order the html nodes had in markup gets more and more shuffled. This can make the user need to scroll back when looking through all the content in detail to not miss out on one.

I wonder how grids in general could offer a way to split content into chunks, which could be like pages or just sections in an infinite page, but making sure the layout fitting algorithm starts fresh at a certain index. The threshold function mentioned above, could apply a threshold of 1 on a certain nth-child. E.g.
```
main {
 grid-template-rows:masonry(0)
}

main:nth-child(100n) {
 grid-template-rows:masonry(1)
}
```

-- 
GitHub Notification of comment by sebfriedrich
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10233#issuecomment-2074458133 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 09:04:43 UTC