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

I prefer this being part of CSS Grid too.

If all the columns are intended to be the same width, it makes this feature feel very similar to the `columns` behaviour—one container separated into multiple columns—albeit with children flowing across the columns rather than down them. In fact, it feels somewhat related to the `column-fill: balance` property, since it's similarly attempting to pack each column evenly.

If this _was_ to be implemented as a new display style where all the columns were the same width, it should also support the use of the `order` property, which provides a lot more flexibility in responsive layouts to get elements balanced nicely.

In any case, if it doesn't end up being implemented as part of Grid, you can expect that authors will often embed grids inside each element to align captions, etc., which seems inherently more work for the UA to handle than a single shared base grid accessed through subgrid.

Some usage scenarios that would benefit me:

* I'm currently emulating masonry layout on some sites for things like testimonial grids using Flexbox containers in side-by-side grid columns, but that has proven a real hassle when implementing responsive design, since the DOM contains the explicit column containers, and the DOM and screen-reader order doesn't reflect the order experienced by sighted users.
* I've also done similar layouts in mega menus, similar to the one shown in the article.
* Dashboard layouts with many cards, each containing charts, alerts, or other infographics. Visually these end up making an arrangement similar to [the ones Apple uses for their summary slides at their keynotes](https://twitter.com/claudioguglieri/status/1171653043148001282) (which I concede could probably be done with conventional grids today, albeit with less flexibility for tile sizes).

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


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

Received on Monday, 22 April 2024 06:30:55 UTC