- From: Naman Goel via GitHub <sysbot+gh@w3.org>
- Date: Thu, 26 Sep 2024 20:16:40 +0000
- To: public-css-archive@w3.org
There are many good reasons to choose both approaches, but I just want to push back against this notion that masonry is not a grid or that it is more like FlexBox. This simply isn't true. If you've decided to create mental model where you think of masonry like FlexBox, there is likely a misunderstanding. I believe people are thinking of how `flex-wrap` or `inline` or `inline-block` or even columns creates multiple "tracks" of content. Even if that is true, it's important to not associate masonry with flexbox, it's simply many rows or columns of items that are aligned across one axis but not the other. There is a reason that masonry has been implemented with columns in the past, but not flexbox. Thinking of it another way, masonry is *exactly* like a grid but where alignment along one axis is thrown away and "packed". These are all mental models that might help you personally, but FlexBox is, at its core, about distribution of space among the children proportionately. FlexBox doesn't even wrap by default. Masonry doesn't have any qualities of FlexBox and the only similarity being mentioned is the fact that it feels similar to wrapping. Even that is a misleading way to think about masonry. Masonry items are places much like grid, except each item is placed as high as possible to "pack" it and alignment within a row is ignored. ---- Again, this is not an argument in favour of either API approach. --- Personally, my own new personal model for thinking about masonry now is something along the lines of: `masonry : grid :: grid :: subgrid` Just like subgrid adds additional alignment constraints to a grid layout, grid layout adds additional layout constraints to masonry. So perhaps, `display: masonry` makes sense, but it should still have a strong connection to grid layout and share other properties that work the same across the two layout modes. -- GitHub Notification of comment by nmn Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9041#issuecomment-2377854026 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Thursday, 26 September 2024 20:16:41 UTC