React MUI Masonry API

MUI or Material-UI is a UI library providing predefined robust and customizable components for React for easier web development. The MUI design is based on top of Material Design by Google.

In this article, we will discuss the React MUI Masonry API. The Masonry component lays out contents of varying dimensions containers and can have configurable spacing and dimensions. The API provides a lot of functionality and we will learn to implement them.

Import Masonry API

import Masonry from '@mui/lab/Masonry';
// or
import { Masonry } from '@mui/lab';

Props List: Here is the list of different props used with this component. We can access them and modify them according to our needs.

• children(node): It is the content of the component.
• classes(object): It overrides or applies styles to the element.
• columns(number/object/string): It is used to set the number of columns. The default value is 4.
• defaultColumns(number): It is used to set the number of default columns.
• defaultHeight(number): It is used to set the number of default heights in px.
• defaultSpacing(number): It is used to set the number of default spacing between components.
• sx (Array<func / object/bool> / func / object): The system prop allows defining system overrides as well as additional CSS styles.
• spacing(number/object/string): It is used to set the spacing between the components. The default value is 1.

CSS Rules:

• root(.MuiMasonry-root): It is the style applied to the root element.

Syntax: Create a Masonry component as follows:

<Masonry columns={6} spacing={1}>
    {sizes.map((size, index) => (
        <Item key={index} sx={{ size }}>
            {index + 1}
        </Item>
    ))}
</Masonry>

Installing and Creating React app and adding the MUI dependencies:

Step 1: Create a react project using the following command.

npx create-react-app gfg_tutorial

Step 2: Get into the project directory

cd gfg_tutorial

Step 3: Install the MUI dependencies as follows:

npm install @mui/material @emotion/react 
npm install @emotion/styled @mui/lab @mui/icons-material

Project Structure:

Step 4: Run the project as follows:

npm start

Example 1: In the following example, we have Masonry Element containing numerical values.

App.js

import "./App.css";
import * as React from "react";
import Box from "@mui/material/Box";
import { styled } from "@mui/material/styles";
import Paper from "@mui/material/Paper";
import Masonry from "@mui/lab/Masonry";

const heights = [150, 30, 90, 70, 110, 150,
  130, 80, 50, 90];
const Item = styled(Paper)(({ theme }) => ({
    backgroundColor: "#fff",
    padding: theme.spacing(0.5),
    textAlign: "center",
    color: "purple",
}));
function App() {
    return (
        <div className="App">
            <div
                className="head"
                style={{
                    width: "fit-content",
                    margin: "auto",
                }}
            >
                <h1
                    style={{
                        color: "green",
                    }}
                >
                    GeeksforGeeks
                </h1>
                <strong>React MUI Masonry API</strong>
            </div>
            <br />
            <Box
                sx={{
                    margin: "auto",
                    display: "flex",
                    justifyContent: "space-evenly",
                    width: "50%",
                }}
            >
                <Masonry columns={4} spacing={2}>
                    {heights.map((height, index) => (
                        <Item key={index} sx={{ height }}>
                            {index + 1}
                        </Item>
                    ))}
                </Masonry>
            </Box>
        </div>
    );
}
export default App;

Output:

Example 2: In the following example, we have six items in a column and more spacing between them.

App.js

import "./App.css";
import * as React from "react";
import Box from "@mui/material/Box";
import { styled } from "@mui/material/styles";
import Paper from "@mui/material/Paper";
import Masonry from "@mui/lab/Masonry";

const heights = [150, 30, 90, 70, 110, 150,
  130, 80, 50, 90];
const Item = styled(Paper)(({ theme }) => ({
    backgroundColor: "#fff",
    padding: theme.spacing(0.5),
    textAlign: "center",
    color: "purple",
}));
function App() {
    return (
        <div className="App">
            <div
                className="head"
                style={{
                    width: "fit-content",
                    margin: "auto",
                }}
            >
                <h1
                    style={{
                        color: "green",
                    }}
                >
                    GeeksforGeeks
                </h1>
                <strong>React MUI Masonry API</strong>
            </div>
            <br />
            <Box
                sx={{
                    margin: "auto",
                    display: "flex",
                    justifyContent: "space-evenly",
                    width: "50%",
                }}
            >
                <Masonry columns={6} spacing={5}>
                    {heights.map((height, index) => (
                        <Item key={index} sx={{ height }}>
                            {index + 1}
                        </Item>
                    ))}
                </Masonry>
            </Box>
        </div>
    );
}
export default App;

Output:

Reference: https://mui.com/material-ui/api/masonry/#main-content