If you're a UX nerd, you probably love a good staggered grid view. It’s super common in mobile development but kinda overlooked on the web — maybe because it’s such a hassle to implement properly. Even though the experimental stuff is ongoing (you can check it out here: [masonry-update](https://developer.chrome.com/blog/masonry-update)), most people still avoid it. Personally, I love this kind of grid because once you have it in your app, your app stops annoying users by limiting the picture size they can upload. Users can throw in whatever weird aspect ratio they want and the grid will still render beautifully. Basically looks like Pinterest. In this post, I’m writing the minimum setup for using the [masonry-layout](https://github.com/desandro/masonry) package by David DeSandro in **Svelte 5 runes mode**. The whole component is around 35 lines — nothing crazy. ## Packages Before jumping into the Svelte part, you gotta install the Masonry package first: ```bash npm i -D masonry-layout ``` And if you're using TypeScript (which I am), also install the types: ```bash npm i -D @types/masonry-layout ``` ## Component Here’s the code snippet from my `MasonryLayout.svelte` component, plus the usage example below it. ```html

``` ## Usage And here’s how you use `MasonryLayout.svelte` in your Svelte page: ```html

``` That’s all for this one — see ya!

👋 Hello, I'm Irhas

Apps

Recent posts

Forecasting Gold Prices with Machine Learning

Sanity GROQ query cheatsheet

Pinterest-style masonry grid in Svelte 5 runes mode

Monochrome adaptive icons

Stop exposing your API endpoints in Next.js

👋 Hello,
I'm Irhas