Re: [csswg-drafts] [css-grid][css-flexbox] Pinterest/Masonry style layout support

Hi, I am the author of [Masonry](https://masonry.desandro.com) JavaScript plugin. Just seeing this thread now.

**I would love to see Masonry layouts be added to the CSS spec**

The Masonry plugin will turn 10 years old next year. It has remained widely popular through the years. Even with the addition of flexbox & grid layout specs, the Masonry use case remains to be supported natively. It deserves to be added to the spec. I regret not advocating for its adoption earlier (hindsight 20/20).

A couple items to think about:

### Loading images

The Masonry layout algorithm works by iterating through a collection of item elements, measuring each, and placing them in a column. If the size of an item changes (loading media like images and video) the entire layout may need to change — placing items in different columns. This can lead disorientation while you watch the page load.

### Multi-column spanning items

Will the layout support items that can occupy more than one column?

![masonry-multi](https://user-images.githubusercontent.com/85566/47433327-3deb3800-d76e-11e8-9764-64cfdf67946e.png)

### Filling gaps

If multi-column items are supported, does the algorithm support filling gaps that may be filled by subsequent items? I had to develop a separate plugin, [Packery](https://packery.metafizz.co), to hand this much requested feature.

![masonry-gap2](https://user-images.githubusercontent.com/85566/47433931-6de70b00-d76f-11e8-8cfb-562f49c4e16b.png)

### Retaining horizontal order

Lots of users still expect horizontal order to be maintained even with the Masonry layout. See desandro/masonry#873. Counter-intuitive to a developer, I realized, but its what the people wanted.

![masonry-order](https://user-images.githubusercontent.com/85566/47433871-498b2e80-d76f-11e8-9c1e-52a9c7f435b5.png)

---

That said, I think a Masonry layout spec that at least supports the basic single-column layout would be a great feature that satisfies 80% of use cases. I'm happy to provide my experience & discuss this more.

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

Received on Wednesday, 24 October 2018 13:35:27 UTC