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

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

From: Mats Palmgren via GitHub <sysbot+gh@w3.org>
Date: Wed, 21 Oct 2020 00:46:20 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-713221727-1603241179-sysbot+gh@w3.org>
@SelenIT wrote:
> 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-*?

Sure that would work too I guess.  I chose `grid-template-*` somewhat arbitrarily.  Note that `dense` **is** used though - it affects step 1 in [grid item placement](https://raw.githack.com/mozilla/gecko-dev/master/layout/docs/css-grid-3/Overview.html#grid-item-placement) (that step determines which items contributes to intrinsic track sizing).  But yeah, we could allow `grid-auto-flow: row masonry dense` to solve that.

> 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 has low practical value anyway.

Yeah, I don't really see how that would be useful.

> since the grid remains two-dimensional, it becomes possible to combine regular grid items with masonry items flowing around them

That seems like a more complex model to me. Also, I don't see how that would work with the new [track alignment](https://raw.githack.com/mozilla/gecko-dev/master/layout/docs/css-grid-3/Overview.html#tracks-alignment) if some items are attached to grid lines and some not.  [Fragmentation](https://raw.githack.com/mozilla/gecko-dev/master/layout/docs/css-grid-3/Overview.html#pagination) probably becomes hairy too.

Note also that you **can** force items to attach to line 1 in the masonry axis with the current proposal (with `grid-row:1` for example), which sort of have the same effect as stamping.  Only for line 1 though, since all other item positions in the masonry axis are treated as `auto`. But, perhaps most use cases for stamping is at the top of the grid anyway? (it seems their example could be implemented with my proposal)

When I play around with their stamping example you linked to it seems they never place any items above the stamped items anyway, so I think being able to place items at line 1 is good enough to emulate the stamping feature they have. (I could be mistaken though.)

> 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

Well, you need to determine the item's position _before_ starting to layout the item, so you don't know the item's size yet when you position it.  And then I'm not sure what should happen if the item was too big to fit between the last masonry item and a grid item.

Your model is an interesting thought experiment.  But I don't really understand how item layout should work and the track alignment feature seems incompatible with it.

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

Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Wednesday, 21 October 2020 00:46:22 UTC

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