Finally turned my Masonry component into a proper Astro package
Honestly, I have a bit of a thing for masonries. They work beautifully in so many contexts that people just... don't try them in. My personal favourite is footers. Criminally underused as a design space. Most of the time they're just a sad column of links, and a masonry layout can make them actually interesting.
I've had the same masonry component copy-pasted across basically every project I've built for the past few years, tweaking it here and there until every copy was a little different. So I finally cleaned it up and voilà — @mannisto/astro-masonry.
It's Astro-native, so no framework overhead. A few things worth mentioning:
- Shortest-column balancing by default so the layout stays visually even without you having to think about it
- Responsive via
breakpoints, auto-sizing viaautoColumns, or both together - Arrow key navigation that follows visual position
Genuinely curious where you all use masonries. What's worked, what hasn't? Feel free to give it some love and drop some feedback. 🚀