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 bschmidt1 on Tuesday April 23, 2024 @02:49PM (#40135668)

I do it on my portfolio site (https://www.bennyschmidt.com) in JavaScript by maintaining a `colCount` with each column just being `flex-direction: column`.

But after seeing this I should switch to using CSS. Didn't put too much thought into it, but when I realized it wasn't immediately simple in CSS grid just did it in JS.

[ Parent | on HN ]

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

I have it on my website (https://packagepicker.co) in only CSS by using `flex-direction: column` and setting a best-guess max height with several breakpoints. Unfortunately it does break down in some situations because some pages have many fewer selections.

My order doesn't super matter but I do like to maintain it. I tried for a long time using CSS columns but I didn't have good luck with that either, though I can't remember exactly why

[ Parent | on HN ]