Re: [csswg-drafts] [css-grid-3][masonry] Masonry Syntax Debate (#11243)

Apple spent some time reviewing the TAG feedback and the comments above, and particularly considering the concerns about awkwardness with `grid-auto-flow` integration that Google also identified, and we have come up with the following counter-proposal building on the Just Use Grid option:

1. Drop the `masonry` keyword from `grid-template-*`. Continue to use `display: grid`.
2. Re-use the grid templating and grid placement properties, as currently.
3. Unify `grid-auto-flow` with `flex-flow` as `item-flow` per the TAG’s feedback, and split it out into the following longhands as described in https://github.com/w3c/csswg-drafts/issues/11480: `item-direction`, `item-wrap`, and `item-pack`.  Also create `item-slack`, either as a longhand or separate.  (Note: Open to renaming the `item-` prefix.)
4. Add a `collapse` keyword to `item-pack` to trigger masonry-style layout.

The new flow controls for masonry would look like this:

```
item-flow: <item-direction> || <item-wrap> || <item-pack> || <item-slack>
shorthand for...
   item-direction: row | column | row-reverse | column-reverse
   item-wrap: wrap | wrap-reverse
   item-pack: normal | dense || collapse
   item-slack: <length-percentage>
```

<hr>

Here’s the code to accomplish two use cases from [this article](https://webkit.org/blog/16026/css-masonry-syntax/):

![grid-3-layout-light](https://github.com/user-attachments/assets/9fe942af-5251-476c-b919-cb4dd3d24c2f)

```
.masonry {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  item-flow: collapse; /* == item-flow: row collapse 1em; */
  gap: 1rem; 
}
```

![sideways-masonry-light](https://github.com/user-attachments/assets/77963065-7c1d-4a8a-8953-545161a0369c)

```
main {
  display: grid;
  grid-template-rows: 2fr 1fr;
  item-flow: column collapse; 
}
```

Thoughts?

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


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

Received on Saturday, 11 January 2025 01:45:34 UTC