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.