Re: [csswg-drafts] Alternate masonry path forward (#9041)

I'm not entirely sure if this needs to be heard or not, but my take: Masonry isn't a `grid`. If you play city-building games, a grid is what's known as the American style of box-like structures. Masonry is not that.

It's a list of boxes, and they are flexible in both size and positioning: I would label it a "flex box" :)

What makes far more sense, to me, is a more grammatically sensible naming if we want to keep it in line with what CSS already has: `flex` and a way to align items, namely `align-items`. A new value would be to compact a flexible box layout.

Example:

```CSS
.masonry {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: compact;
  gap: 1px;
}
```

You might even consider more specific options:

```css
align-items: compact-start;
```

Which would push blocks upward into their available white space (excluding the `gap`);

```css
align-items: compact-end;
```

Which would push blocks downward into their available white space (excluding the `gap`).

It would also work if your flexbox is in the `column` direction (compacting to the left or right).

Potential issues:

1. In a `row` setup, what if one column in that row is wider? I'd say: that's up to the developer;
2. What if one column is significantly taller than others? I'd say: magic rearranging of items should be left to JavaScript.

---

Please don't make it into a grid addition. I feel that a masonry layout is absolutely not a grid. 

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


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

Received on Tuesday, 14 May 2024 14:24:47 UTC