Re: [csswg-drafts] [css-grid-3][masonry] Masonry Syntax Designer/Developer Feedback (#11060)

I'm strongly in favor of introducing a separate display type, such as `display: masonry`.*

I've explored content from the WebKit and Chrome teams, along with other blogs and videos, and have worked on multiple layouts that ideally would use a masonry approach (e.g., a wall of reviews or a Pinterest clone). From my perspective, adding masonry to the existing grid model introduces unnecessary complexity—both technically and conceptually. Here are two examples that underscore why masonry and grid are inherently different:

### Problem 1: Confusion with Masonry on Both Axes
```css
.masonry {
  display: grid;
  grid-template-columns: masonry;
  grid-template-rows: masonry;
}
```
What would happen in this case? Is it just up to developers to remember to avoid this configuration? This ambiguity indicates a fundamental mismatch between masonry and grid.

### Problem 2: Over Complication When Changing the Masonry Axis (esp. with template areas)
_Not to mention, 'areas' isn't an ideal concept for defining rows or columns in a masonry layout._
```css
.masonry {
  display: grid;
  grid-template-areas: "a b c";
  grid-template-rows: masonry;
}

/* Switch masonry direction. */
.masonry {
  grid-template-areas: "a" "b" "c"; /* Each row is quoted. */
  grid-template-rows: unset;
  grid-template-columns: masonry;
}
```
Re-declaring template areas like this makes it clear that we are stretching the grid model beyond its intended use to fit masonry behavior.

---

These are just two examples, but there are undoubtedly many more—both existing and yet to come—that illustrate the challenges of merging grid and masonry. Moreover, I'm not seeing any compelling advantages in tying the two together, especially when the conceptual separation could be much cleaner and easier to use.

IMHO introducing a dedicated display type would provide a clearer, more intuitive approach to handling these kinds of layouts, avoiding the complexity and ambiguity that arise from trying to force masonry behavior into the existing grid framework.

**Footnotes**
_* I'm not convinced using a metaphor (masonry) is the right approach for the final display type name._ 

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


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

Received on Wednesday, 23 October 2024 00:55:01 UTC