Frontend

what's the easiest way to fill the gap between items in a column?

ensdata.net ✦ pugson.net/rfe ✦ 𝙿𝚄𝙶.𝙴𝚃𝙷 ✦ 𝙿𝚁𝙴𝚅: @rainbow 🌈 ✦  𝚆𝙾𝚁𝙺𝙸𝙽𝙶 𝙾𝙽: @vision 👁️

building reel.farm and farcasterstudio.com

Unfortunately impossible without JavaScript or using `grid-auto-flow: dense;` and manually setting grid spans on each child.

Been waiting forever for `grid-template-rows: masonry;` to become standardized 🥲

Unfortunately impossible without JavaScript or using `grid-auto-flow: dense;` and manually setting grid spans on each child.

Been waiting forever for `grid-template-rows: masonry;` to become standardized 🥲

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Masonry_Layout

https://github.com/markmead/js-masonry

This has met my needs nicely. Also has an Alpine JS flavor, if you're into that.

I’ve used this library before and it works well

I’ve used this library before and it works well

https://github.com/jaredLunde/masonic

The only problem is externality pricing.

Building https://negationgame.com

dad • sr full stack dev • pixel art • Building /360 • ENS degen • https://vision.io/profile/enspiration • /black /btw /king /big • prev dos.eth

this worked! thank you! also glad to know it's called a masonry layout lol

one option https://www.smashingmagazine.com/native-css-masonry-layout-css-grid/