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/
