W3C home > Mailing lists > Public > public-css-archive@w3.org > May 2020

Re: [csswg-drafts] [css-grid-2] Masonry layout (#4650)

From: Ilya Streltsyn via GitHub <sysbot+gh@w3.org>
Date: Fri, 15 May 2020 10:51:07 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-629168861-1589539866-sysbot+gh@w3.org>
Wouldn't the Masonry concept better fit into the overall Grid logic if `masonry` becomes a new `grid-auto-flow` modifier rather than the separate value of `grid-template-*`? I.e.,

- regular auto-placement is sparse track-by-track, leaving "holes" in the layout;
- `dense` auto-placement looks back for the available cells in the earlier tracks, leaving less unused space;
- and `masonry` auto-placement ignores the perpendicular grid tracks at all and fills the grid tracks in the auto-flow direction using the Masonry algorithm, packing them even denser (you can think of it as kind of "super dense").

The obvious downside of that approach is the impossibility to enable the Masonry behavior on both directions at once (`grid-template: masonry / masonry`), but I believe that such case doesn't make much sense at has low practical value anyway. In the same time it seems to have several advantages:

- the Grid model seems less "distorted" (a grid remains a grid, only the way it directs its items is changed);
- all grid properties remain useful (as opposed to `grid-auto-flow` getting ignored with `grid-template-*: masonry` approach);
- interaction between auto-placed masonry items and regular grid items snapped to grid lines remains less surprising;
- since the grid remains two-dimensional, it becomes possible to combine regular grid items with masonry items flowing around them, similarly to [stamped elements](https://masonry.desandro.com/options.html#stamp) in the original @desandro's Masonry.js, but even more powerful.

I suppose it would be not too hard to enable the latter option with the following change to the algorithm: before starting Masonry layout, place all grid items assigned to explicit grid areas as usually, and then during the Masonry placement check not only the top position, but also the available space between the previous masonry item and the next grid item in each track (please correct me if I'm mistaken and have underestimate the diffucuilty).

Wouldn't it be easier and "more natural" to integrate Masonry into Grid this way?

GitHub Notification of comment by SelenIT
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4650#issuecomment-629168861 using your GitHub account
Received on Friday, 15 May 2020 10:51:08 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:42:06 UTC