React MUI Grid

Material-UI (MUI) is an open-source library that provides predefined and customizable React UI components for faster web development. All the Material-UI components follow Google’s guidelines for creating UI components. In this article, we will discuss the Grid Component of the Material-UI library.

React MUI Grid Component: A Grid is a type of container that handles different screen sizes and orientations. They can change their size according to the user’s window size. Material-UI provides a Grid component for the implementation of the grid system.

Syntax:

<Grid style={{ background:'green' }}>GeeksForGeeks</Grid>

Installing React App: 

Step 1: Use this command to create React App:

npx create-react-app example

Step 2: Use this command to enter the project directory:

cd example

Installing the MUI library in our app: Use this command to set/install the MUI library in our app:

npm install @mui/material @emotion/react @emotion/styled

Importing the Grid Component:

import Grid from '@mui/material/Grid';
or
import { Grid } from '@mui/material';

Props list:

• children: It denotes the content of the component.
• columns: It denotes the number of columns in the grid.
• spacing: It denotes the space between the consecutive type “item” components. To use the spacing prop, the component must be container type.
• columnSpacing: It defines the horizontal space between the consecutive type “item” components. It overrides the value of the spacing prop.
• rowSpacing: It defines the vertical space between the consecutive type “item” components. It overrides the value of the spacing prop.
• container: It defines the component that will inherit flex container behavior.
• item: It defines the component that will be marked as the item.
• direction: It is similar to the “flex-direction” style property of CSS.
• wrap: It is similar to the “flex-wrap” style property of CSS.
• color: It is the color of the component.
• lg: It is the numeric value provided against this prop that will be applied to the item for large screen size.
• md: It is the numeric value provided against this prop that will be applied to the item for medium screen size.
• sm: It is the numeric value provided against this prop that will be applied to the item for small screen size.
• xl: It is the numeric value provided against this prop that will be applied to the item for extra-large screen size.
• xs: It is the numeric value provided against this prop that will be applied to the item for extra-small screen size.

Example 1: The below example shows how to use the Material-UI Grid component.

Javascript

import React from 'react';
import Grid from "@mui/material/Grid";


function App() {
    return (
        <div>
            <h2>Welcome to GFG</h2><br />
            <Grid container>
                <Grid item xs={4}
                    color={{ background: 'blue' }}>
                    Item 1 xs=4
                </Grid>
                <Grid item xs={1}
                    color={{ background: 'green' }}>
                    Item 2 xs=1
                </Grid>
                <Grid item xs={2}
                    color={{ background: 'yellow' }}>
                    Item 3 xs=2
                </Grid>
                <Grid item xs={3}
                    color={{ background: 'red' }}>
                    Item 4 xs=3
                </Grid>
            </Grid>
        </div>
    );
}

export default App;

Output:

Example 2: The below example shows the effect of breakpoints in the Material-UI Grid.

Javascript

import React from 'react';
import Grid from "@mui/material/Grid";


function App() {
    return (
        <div>
            <h2>Welcome to GFG</h2><br />
            <Grid container>
                <Grid item xs={2} md={4}
                    color={{ background: 'blue' }}>
                    Item 1 xs=2 and md=4
                </Grid>
                <Grid item xs={1} md={2}
                    color={{ background: 'green' }}>
                    Item 2 xs=1 and md=2
                </Grid>
                <Grid item xs={1} md={2}
                    color={{ background: 'yellow' }}>
                    Item 3 xs=1 and md=2
                </Grid>
                <Grid item xs={2} md={3}
                    color={{ background: 'red' }}>
                    Item 4 xs=2 and md=3
                </Grid>
            </Grid>
        </div>
    );
}

export default App;

Output:

Reference: https://mui.com/material-ui/api/grid/