Member-only story

Masonry Layout with Infinite Scroll (No Libraries, Pure React)

Sunny Prakash
JavaScript in Plain English
6 min readFeb 15, 2025

--

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 -

Powered by Pexels

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…

--

--

Published in JavaScript in Plain English

New JavaScript and Web Development content every day. Follow to join our 3.5M+ monthly readers.

Responses (1)

What are your thoughts?