Re: [csswg-drafts] [css-grid-3] Designer/developer feedback on masonry layout (#10233)

Key thoughts on this proposal:

1) Should this be part of CSS grid? I agree it should, if (and only if) it can be implemented orthogonally to other grid features. By that, I mean it should do something sensible when combined with _every_ other grid option. If that's not likely to happen (consistently, in each browser), I don't think it should. This really needs to have a suite of conformance test pages fairly early on.

1) It's unclear whether `grid-template-columns` would be equally supported -  IMO not doing so would be a serious mistake, because everything else in grid works equally on either axis

2) I've seen various requirements RE the slot fill order for masonry layout. `grid-auto-flow` doesn't appear to work with masonry layout in safari tech preview.

2) Other grid features: Spanning and track sizing are very common requirements. I struggle to think of a sensible way to use explicit placement with masonry, although I'm sure someone will. Subgrid might be useful with spanning, although it feels very complex and I'd expect implementations to vary sufficiently that I probably couldn't rely on it for authoring.

2) Spanning columns is of virtually no use (I'll still end up having to use JS or something anyways) without a way to control how the extra whitespace this creates is positioned (eg I set `justify-content: space-between; align-content: space-between`, but the extra whitespace all ends up below the image - see <img width="476" alt="image" src="https://github.com/w3c/csswg-drafts/assets/47430/abcc82a6-ee5e-484b-bc4f-77188f7c839e">). 



Minor nits on the demo at https://webkit.org/demos/grid3//photos/ :
 * It would be nice to have a title attribute with "item 1", "item 2", "item 3" etc so you can hover to visualize the grid flow without resorting to the devtools
 * There's heaps of CLS on a slow connection because the `img` tags lack an aspect-ratio
 * making the `<code>` block live-editable would be very nice.


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


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

Received on Saturday, 20 April 2024 01:01:13 UTC