- From: Christian Francis via GitHub <sysbot+gh@w3.org>
- Date: Tue, 30 Apr 2024 17:14:35 +0000
- To: public-css-archive@w3.org
**First, thank you WebKit team for addressing this, and writing such a detailed blog post.** > Should “masonry”/“waterfall” be part of CSS Grid or a separate display type? ### It should be part of CSS Grid To keep it short, I'll just say I agree with what those have already made a defense for masonry being part of CSS Grid. It makes the most sense to me and would offer the most functionality in a logical way. I would also like to second @desandro's thoughts on the naming. Although "masonry" makes sense to me, I know it's an odd word that many do not understand, so `grid-template-rows: collapse;` would be best for an accurate description of what it does. > Will you use this at all? What might you do with it? > Do you have links to demos you’ve made? We want to see your ideas and use cases. ### I already use it in production *…with `@supports (grid-template-rows: masonry)`* I recently worked on a project for a church youth retreat. In this project, I included account pages so registrants could view and edit information after registering. Due to the nature of different inputs requiring more space than others, the masonry layout makes this section look a lot cleaner and easier to navigate. This first picture is what most people will see, since the masonry feature flag has to be enabled. This is what you would expect by not setting `grid-template-rows` at all. It ends up leaving a large gap next to the address input fields, since they take up a lot of vertical space, in contrast to the conduct agreement. <img width="1218" alt="Screenshot 2024-04-30 at 12 51 22 PM of normal grid layout" src="https://github.com/w3c/csswg-drafts/assets/96249878/d0faf485-7257-4270-b321-b81c3f2f8a3b"> When I turn on the masonry feature flag, we get this consistent layout that collapses the checkmark/xmark fields to fit cleanly next to the address field. It's a small detail, but it goes a long way in making the data easy to navigate. <img width="1219" alt="Screenshot 2024-04-30 at 12 51 42 PM of masonry grid layout" src="https://github.com/w3c/csswg-drafts/assets/96249878/a4f514cd-0dec-423e-a5db-55c65de193fe"> I'm sure you all know, I could have used two separate grids and divided the fields between them to create the two columns, but it would have taken a lot of extra work making the order of the fields flow correctly and keep relevant information together. Unlike using the masonry layout for displaying a photo gallery, displaying form info requires the grouping of relevant information, or you'll end up with a terribly confusing user interface and a frustrating user experience. > Are there things you want to do that you can’t do with this model? ### `grid-template-columns` As many have already said, the exclusion of `grid-template-columns` would be a mistake. Although `grid-template-rows` would surely be the primary use-case for the masonry layout, excluding `grid-template-columns` would be very confusing and limiting in creating responsive designs. -- GitHub Notification of comment by andrilla-francis Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10233#issuecomment-2086062172 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 17:14:36 UTC