How to Create Responsive Grid Layout using React Masonry

In this post, i will teach you how to create a responsive grid masonry layout in React using React responsive masonry package.

React Masonry is a popular library for creating responsive and dynamic grid layouts in React applications.

In general, the grid layout contains fixed-size rows and columns. On the other hand, masonry grids help you create a flexible or dynamic layout by automatically adjusting the item positions based on the items’ dimensions.

Masonry Grid in React looks more organized and majestically appealing.

This guide will ensure how to place content in React masonry grid. We will show you how to arrange items in columns and rows in React function component.

This short guide will explain how to customize React masonry component and also how to use the custom properties of the masonry grid in React.

Implementing a masonry grid in React is not challenging. It requires certain steps to be taken in the systematic process.

React Responsive Masonry Grid Component Example

• Step 1: Install React Framework
• Step 2: Install React Masonry Grid Library
• Step 3: Build New Function File
• Step 4: Implement Responsive Masonry Gallery
• Step 5: Register Component in App
• Step 6: Start React Server

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

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>
      <Masonry columnsCount={4} gutter="10px">
        {images.map((image, i) => (
          <img
            key={i}
            src={image}
            style={{ width: "100%", display: "block" }}
          />
        ))}
      </Masonry>
    </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.

Conclusion

Masonry grids are user-friendly, and, on top of that, enhance the user-experience.

The common notion about React masonry module:

First, It drastically enhances web applications’ usability.

Second, you can show images, such as in galleries or portfolios, which also might be used for content: text, videos, and digital online products.

In this tutorial, we have learned how to create a masonry grid component using React js framework. We also dug deep and learned how to use custom props of the react-responsive-masonry library.

We have successfully elaborated on properly integrating the masonry grid in React js application.