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

> What do you think? Try it out. Write about it on your own blog. Describe what you do and don’t like about current implementations. Create some demos of your own to explore what else is possible.
> 
> * Should “masonry”/“waterfall” be part of CSS Grid or a separate display type??

I think that depends on how it ends up working. If it ends up being a complex layout type with many of its own options and switches, it should be seperate so long as it covers all use cases. However, in its current state its basically "grid without lining up rows", which is a pretty minor change.

Another argument for using grid is that it will inherit all of the improvements that come to it (styling grid lines (if that ever happens), template-columns, etc).

> * Do you want the capabilities to define a single-axis grid with CSS Grid — to use subgrid, spanning, explicit placement, and combining different track sizes? Or do you only want the ability to define a classic masonry layout with equal-sized columns?

To me, calling one where all columns are the same size a "masonry layout" does not sit right, but is absolutely desired.

At lesat the way I think about it:

Masonry items are slotted where they best fit, row or column. No size or number of rows/columns is determined, and items can be scaled to fit best within the layout.
![image](https://github.com/w3c/csswg-drafts/assets/94419893/55a4a594-09ec-4528-b212-5b7928a2b76b)

Waterfall: a set number of rows OR columns is determined, and items are placed within them to the best fit possible. Items can be scaled to fit better.
![image](https://github.com/w3c/csswg-drafts/assets/94419893/be8fe76d-fcb0-4e9a-9045-f3aa9f8b938b)

I would be fine with using one term to contain both, in which case it should be masonry (rationale: masonry can include both, waterfall is more specific so it cant). I would like to see support for both layout types. Examples of sites that use what I described as "masonry" are DeviantArt and Steam (community art submissions mostly). Examples of what I classified as a waterfall layout are numorus.

> * Will you use this at all? What might you do with it?

I would absolutely use this. I deal a lot with images (concept art, showcases, etc) and illustrations (icons, etc, vector art basically) and its annoying to need to specify grid-row- and grid-column- spans to get things looking about right. This would save me a ton of trouble.

Having this be a thing offically would encourage me to use it more aswell, such as to lay out text snippets next to each other more easily.

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

What I mentioned above as masonry layouts, for which you can't really determine a column/row size.

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


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

Received on Tuesday, 30 April 2024 21:44:57 UTC