- From: Jeremy Thomas via GitHub <sysbot+gh@w3.org>
- Date: Wed, 08 May 2024 13:08:51 +0000
- To: public-css-archive@w3.org
I'm late to the party but wanted to cast a vote for `display: masonry` because for me, a Masonry layout is **not a grid**. I just implemented CSS Grid to my framework [Bulma](https://bulma.io/), and the amount of properties is already high, even if some of them are shared with Flexbox. And for me: * CSS Grid is 2-dimensional * Flexbox is 1-dimensional * Masonry is 1-dimensional too A grid is two-dimensional because it has **rows** and **columns**. These rows and columns can be explicitly or implicitly defined. Cells can span multiple columns and/or rows. When I'm using `display: grid`, I focus on defining my **columns**. I rarely specify the **rows** I want, but even then, the browser will _implicitly_ create rows for me. And I would sometimes use these _implicit_ rows for specific cells (like spanning a cell across 2 rows). In a Masonry layout however, I only care about the **columns**. I've used and created Masonry layouts with JavaScript, and I never cared about the rows. Take a look at this Masonry layout, taken from [Webkit's blog post](https://webkit.org/blog/15269/help-us-invent-masonry-layouts-for-css-grid-level-3/#we-want-to-hear-from-you). This simple Masonry layout already has a whopping **60 rows**:  I don't see any scenario in which I would actually _use_ these implicit rows, like telling an item to "span 2 rows", because that's not how a Masonry layout works. The usual mechanics of a Masonry layout are to: * specify a number of columns * explicitly with a number (`4 | 8 | 12…`) * implicitly with a responsive range (like `minmax` in CSS Grid) * place an item in each of these columns, until they're all filled * place any additional item in the _shortest_ column, so that the layout is as **dense as possible** * continue until all items have been placed At no point did the concept of rows come into action. And if you look at the [documentation of Masonry](https://masonry.desandro.com/options) by @desandro (probably the best library out there), you can see how you can specify the `columnWidth` but there is no `rowHeight`, because it's irrelevant here. That for me is why I don't consider Masonry layouts as a type of grid, but rather as another type of 1-dimensional layout. In any case, I appreciate all the effort put into this by browser developers and the feedback provided by the community, and hope to see it implemented soon. -- GitHub Notification of comment by jgthms Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10233#issuecomment-2100540208 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Wednesday, 8 May 2024 13:08:51 UTC