Help us invent CSS Grid Level 3, a.k.a. "Masonry" layout

Re:Help us invent CSS Grid Level 3, a.k.a. "Masonry" layout by rezonant on Tuesday April 23, 2024 @07:39AM (#40130727)

Such browsers can also get by based on the semantic ordering of content within the document, which will more closely match the visual reality when a masonry type layout is used. The alternative of defining several columns leads to at least one column being shoved all the way at the end of the document after the previous column, whereas in a masonry layout that wouldn't be the case.

This is where a proper solution to this problem shines: After all, when you are on mobile (at least 60% of your users), they will get a single column anyway. Any solution that doesn't solve for them is a nonstarter.

That being said, it is the slow loading of JS and the folks using truly modern browsers with JS turned off that are more common, and for those people this isn't a problem.

[ Parent | on HN ]

Re:Help us invent CSS Grid Level 3, a.k.a. "Masonry" layout by jampekka on Tuesday April 23, 2024 @08:06AM (#40130972)

JS masonry libraries, e.g. masonry.js, can and typically do use the HTML for the content and just lay it out similarly to what CSS does.

[ Parent | on HN ]

Re:Help us invent CSS Grid Level 3, a.k.a. "Masonry" layout by rezonant on Tuesday April 23, 2024 @12:56PM (#40134133)

But the screen size is an important part of how the library will lay out the bricks, and that isn't known until JS runs (this can kind of be done with client hints, but not on initial page load)

[ Parent | on HN ]

Re:Help us invent CSS Grid Level 3, a.k.a. "Masonry" layout by jampekka on Tuesday April 23, 2024 @03:41PM (#40136301)

I was referring to the document still having the semantic structure. E.g. masonry.js also supports relative sizing, so it doesn't need to know the screen size beforehand.

[ Parent | on HN ]