Re: [csswg-drafts] Alternative masonry path forward (#9041)

@nmn

I am not trying to persuade you, nor am I denying your opinion.

However, I have created an image that illustrates the differences between the two structures I have in mind for creating a masonry layout. I hope you find it helpful.

First, for developers familiar with grid layouts, masonry layouts may seem somewhat complex. The image of items being placed along the horizontal axis in a grid may lead to the impression that the axis specified for masonry disappears, and items that were placed below rise to fill the gaps.

![IMG_0155](https://github.com/user-attachments/assets/f3db70b3-200c-433d-bf07-e5f8020ac70c)

The `masonry` keyword can be viewed as an automatic packing feature within the grid system, and treating it as part of the grid API does not create any contradiction. However, imagining all items rising up within the grid can be challenging, and the linear layout lines that a grid typically provides may be disrupted, making the design harder to manage.

On the other hand, if we treat the masonry layout as an entirely separate layout, it’s easier to picture each item simply aligning along the main axis in its respective track. I found this easier to understand, and the result of a masonry layout becomes much more predictable in my opinion.

![IMG_0158](https://github.com/user-attachments/assets/8b68e7aa-66a4-435d-802a-d291634ec6b3)

Of course, the way people perceive flex, grid, or masonry layouts may differ from person to person, and if you find the grid syntax intuitive, that’s something that shouldn’t be dismissed.

As you mentioned, the design outcomes for both grid and masonry layouts are indeed similar. Unifying these interfaces will allow us to work with the same mental model, avoiding future divergence between the APIs, which I think is a good thing.

The reason I support `display: masonry;` instead of grid syntax is rooted in this understanding. I hope this explanation helps you see where I’m coming from.



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


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

Received on Friday, 27 September 2024 12:56:49 UTC