How to Create Masonry Layout in React 18

Last Updated on March 4, 2024 by Digamber in React JS

In this guide, we’ll demonstrate how to create a masonry gallery in React application using the masonry layout method.

Masonry layout: In contrast to conventional grid layouts, which arrange items in rows and columns, a masonry layout arranges elements vertically at different heights. This enables objects or content blocks to fit as many vertical spaces as possible, creating a distinctive and asymmetrical structure where objects are arranged according to their sizes.

To demonstrate, we will create a responsive gallery in React utilizing the react-responsive-masonry package. It displays collections of images in different column sizes and adjusts images in the grid layout dynamically to occupy the available space when the browser is resized, the viewport changes, or the screen size is altered.

So, Let’s start coding!

Install React Framework

You must install node and npm and ensure your development system is ready.

Begin by installing a brand new React framework using the below command.

npx create-react-app my-react-app

You can start developing the app after you enter the project directory.

cd my-react-app

Install React Masonry Grid

You can install the masonry module very easily by using the below command.

npm install react-responsive-masonry --legacy-peer-deps

Build New Function File

In the below code example, we defined a new function component called Masonry that returns a Masonry() method; you can also use a props object to pass an argument.

Add the below code in the components/MasonryGrid.js file.

import React from 'react'

function MasonryGrid() {
  return (
    <div></div>
  )
}

export default MasonryGrid

Implement Responsive Masonry Gallery in React

To create the masonry layout in React requires Masonry import from the React responsive masonry package.

We can use Masonry component to form the responsive masonry layout.

Hence, place the below code inside the components/MasonryGrid.js.

import React from "react";
import Masonry, { ResponsiveMasonry } from "react-responsive-masonry";

function MasonryGrid() {
  const images = [
    "https://picsum.photos/200/300?image=1050",
    "https://picsum.photos/300/300?image=206",
    "https://picsum.photos/200/300?image=1050",
    "https://picsum.photos/300/300?image=206",
    "https://picsum.photos/200/300?image=1050",
    "https://picsum.photos/300/300?image=206",
    "https://picsum.photos/200/300?image=1050",
    "https://picsum.photos/300/300?image=206",
  ];
  return (
    <div>
      <h2 className="mt-3 mb-4 text-center">
        React Js Responsive Masonry Gallery Example
      </h2>
      <ResponsiveMasonry columnsCountBreakPoints={{ 350: 1, 750: 2, 900: 3 }}>
        <Masonry columnsCount={4} gutter="10px">
          {images.map((image, i) => (
            <img
              key={i}
              src={image}
              style={{ width: "100%", display: "block" }}
            />
          ))}
        </Masonry>
      </ResponsiveMasonry>
    </div>
  );
}

export default MasonryGrid;

Register Component in App.js

In this step we will inject the MasonryGrid component in the main entry file. You have to open the App.js and insert the below code in the file.

import React from "react";
import MasonryGrid from "./components/MasonryGrid";

function App() {
  return (
    <>
      <MasonryGrid />
    </>
  );
}

export default App;

Start React Server

Ultimately, invoke the development server by executing the following command:

npm start

This will begin the react development server and start your app on your default web browser at:

http://localhost:3000

We are done! You’ve successfully started a new React app and can easily test the feature.