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

I would love to write a longer post about this in the future, but I’ll need more time to experiment with the existing masonry prototype implementations, and think about it more.

Based on my preliminary explorations and experiments:

1. I think masonry-like something should be a part of CSS Grids.
2. However, I think right now it is too “magical” and tries to combine many things in one:
 - Removal of the grid lines from one of the axes. This can be useful in regular grids, without the “masonry” behavior. Occasionally it can be worked around by extra wrappers and, optionally, subgrid, but there are many cases where this can be helpful for a “flat” tree.
 - The “masonry” item-placement algorithm, where when we have the above feature on, we can place items in the shortest available spot in one of the “collapsed” columns or rows. Note how I said, “one of”: I would love to be able to make only a subset of rows or columns in a grid to behave like “masonry” (probably a use case for combining them with subgrids). 
 - Track alignment: I am not sure why we can’t use the existing content alignment/justification for this and had to introduce masonry alternatives. It feels like something in-between of masonry being a part of a grid, and not.
3. There are cases for one-dimensional grid that could benefit from something similar to masonry, but not exactly: when we want an element in one column to start (or attempt to start) in a different column from the same row. The main example of this: sidenotes. This is a bit similar to masonry in a sense that in this case there are no defined row lines, and one element’s position depends on the others’ elements. There were [some explorations](https://meyerweb.com/eric/thoughts/2023/09/12/nuclear-anchored-sidenotes/) of how to solve this with anchor positioning, but it still felt like a hack. Having this a built-in feature would be awesome, and there might be multiple other cases for these kinds of layouts (placing elements in different rows/columns based on other elements’ positions in different ones) in typography.
4. The best way forward, in my opinion, could be if we could decouple all the features that make masonry what it is, and see how they could be implemented as a part of CSS grids one by one. It is better to create smaller building blocks with well-defined interactions with other elements, than trying to fit a bigger concept into a pre-existing one.

That’s all from me for now — I have many other thoughts, but will need to read all the comments here, and experiment more before I could properly articulate them (and show examples).



-- 
GitHub Notification of comment by kizu
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10233#issuecomment-2074484643 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:16:44 UTC