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

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