Member-only story
Masonry Layout with Infinite Scroll (No Libraries, Pure React)
Let’s build a Pinterest-like photo gallery. Now, before you think this is a tutorial on cloning Pinterest, let me stop you right there. It’s not 🙅🏻♂️. What I’m really interested in exploring is how Pinterest elegantly displays images, videos, and other media on its main page.
At first, I thought to write a post about styling the photo gallery and how to lazy load them with infinite scroll using React and TypeScript. But then I came up with this term “Masonry”. So what is Masonry in the context of CSS world? As per Google -
A masonry gallery is a type of layout that arranges images in a grid format with varying sizes and dimensions. This style of gallery allows for more flexibility in the layout and can create a more visually interesting display of images.
Something like below -

Still with me? Great! Let’s dive into the code. And yes, it will be responsive!
First, we need some boilerplate. I’ve used Vite
to quickly set up a new React app with TypeScript. Just run the following command in your terminal and follow the prompts. You’ll have a fresh React project in no time.
npm create vite@latest
Next, we need photos. Feel free to use Unsplash, Pixbay or Pexels API to fetch infinite list…