- From: Adam Argyle via GitHub <sysbot+gh@w3.org>
- Date: Tue, 21 Jan 2020 18:22:29 +0000
- To: public-css-archive@w3.org
I love that this is getting attacked from a proposal perspective! **Thanks so much** for spinning this up and putting so much great thought into it 👍 I have a question around whether or not masonry fits better into a flexbox mentality than grid. To me, grid creates rows and columns, and it does so by drawing lines and fitting cells into those lines (this isnt an exact definition but I believe they are tenants). Where flex allows for more intrinsic layouts that have no lines, but does have an axis. Masonry is a combo of both in most cases, where columns are desired (so vertical lines) but no horizontal lines, as all items can have their own intrinsic height.  In this above Pinterest masonry layout (arguably the most famous and shining example of why/when this is effective Ui/UX) there are no visible row lines, and I believe if you added them it would move the layout more towards "packery" than masonry. Grid can already make great "dense" [packery type layouts](https://visbug.web.app), where row/column lines are super useful. While flexbox and [css columns](https://www.josh.tattoo/) can do types of packery (example 2) and masonry (example 1), they can't properly layout as you've shown, 1, 2, 3 children are the first in the columns. TLDR; masonry shares more with flexbox than grid in my opinion I'm curious if this assertion can help shape this proposal? also, maybe a new display type would be better, since I feel like masonry has hybrid properties of grid and flex. save us from overloading grid or flex by putting the uniqueness into a new display type? Those are my thoughts, hope they're helpful! Example #1: flex masonry by setting container height <img width="722" alt="Screen Shot 2020-01-21 at 10 15 57 AM" src="https://user-images.githubusercontent.com/1134620/72831214-3ea3a000-3c37-11ea-883f-72935fe004e5.png"> Example #2: flex packery by setting container height <img width="730" alt="Screen Shot 2020-01-21 at 10 16 07 AM" src="https://user-images.githubusercontent.com/1134620/72831215-3f3c3680-3c37-11ea-841e-fcb81770db58.png"> Example #3: css columns masonry <img width="1479" alt="Screen Shot 2020-01-21 at 10 17 08 AM" src="https://user-images.githubusercontent.com/1134620/72831216-3f3c3680-3c37-11ea-8143-7685b23f8731.png"> Notice how not 1 demo has a shared row line anywhere. I believe this to be the defining feature of masonry and I believe it conflicts with putting masonry into css grid. thoughts!? thanks for letting me vent the thought stream. -- GitHub Notification of comment by argyleink Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4650#issuecomment-576813302 using your GitHub account
Received on Tuesday, 21 January 2020 18:22:31 UTC