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

Hello everyone,

I would like to express my opinion that the masonry layout should be integrated as part of the grid layout, for the reasons outlined below.

### Defining CASE 1 and CASE 2
In this discussion, I will refer to the case where `display: masonry;` is treated as a separate layout property as **CASE 1**, and the case where masonry is integrated as part of the grid layout as **CASE 2**. Throughout this explanation, I will compare these two approaches in terms of compatibility, benefits, fallback strategies, and developer experience.

### Compatibility with Grid Layout
When considering masonry as part of the grid layout (as in **CASE 2**), some may worry about potential conflicts between the default properties of grid and those of masonry layouts. However, I believe that in most cases, these two types of layouts would not conflict with each other. Even when creating masonry layouts using grid, there is little need to override the default grid properties. For example, as demonstrated in this [Webkit demo](https://webkit.org/demos/grid3/), typical masonry layouts can be created without the need for complicated CSS tricks or overriding grid properties. Additionally, a [Chrome blog post](https://developer.chrome.com/blog/masonry-syntax) comparing **CASE 1** and **CASE 2** shows that there is no significant difference in the amount of CSS required between the two approaches. While it is possible that future grid enhancements might introduce default property values that developers may want to set differently for masonry and grid layouts, at present, it is difficult to find concrete cases where such conflicts would arise.

### Benefits of Treating the Masonry Layout as Part of the Grid Layout
One of the key benefits of integrating masonry into the grid layout (as in **CASE 2**) is the ability to leverage existing grid features, such as subgrids. Subgrids allow for cohesive designs among child elements within a grid, something highly desirable in many masonry layouts as well. Additionally, I believe that future enhancements to the grid layout will also be beneficial for masonry, making their integration even more valuable. By treating masonry as an extension of the grid layout, developers would be able to start using it immediately, without needing to learn a completely new system.

### Fallback Strategy
In terms of fallback support, while it may seem like a disadvantage that CSS `@supports` won’t be applicable in **CASE 2**, I do not consider this a major issue. Masonry layouts involve items with varying sizes and aspect ratios, and attempting to replicate this using the current grid layout could result in large gaps or overflowing elements, which would lead to unpredictable designs. Until masonry is more broadly supported in browsers, using a JavaScript solution like [Masonry.js](https://masonry.desandro.com/) would be a wise fallback choice.

### Developer Experience
If masonry were implemented as a separate set of properties, similar to grid (as in **CASE 1**), developers would need to learn a substantial number of new CSS properties, which could lead to confusion. Learning even one new property can be challenging for developers, and increasing the number of new concepts makes this even more difficult. On the other hand, by making masonry part of the grid layout (as in **CASE 2**), developers would only need to understand the `masonry` keyword and could immediately apply their existing knowledge of grid properties. This would not only make the learning curve less steep, but it would also speed up adoption of masonry layouts in practical development. Furthermore, being able to directly use newly introduced grid properties within masonry layouts would reduce the need for developers to remember additional rules.

### Conclusion
In conclusion, I believe that integrating masonry as part of the grid layout would provide a more intuitive and consistent developer experience. It would also ensure flexible and expressive designs, while benefiting from future grid enhancements. The fact that there is no significant difference in the CSS required between the two approaches, as shown in the Chrome blog, adds further support to this integration. For these reasons, I strongly advocate for adopting masonry as part of the grid layout.


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


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

Received on Friday, 20 September 2024 08:31:05 UTC