React MUI is a UI library that provides fully-loaded components, bringing our own design system to our production-ready components. MUI is a user interface library that provides predefined and customizable React components for faster and easy web development, these Material-UI components are based on top of Material Design by Google.
In this article, we’ll be discussing React MUI Grid layout. A responsive layout grid adapts to screen size and orientation, ensuring consistency across layouts.
Grid Layout Variants:
- Fluid grids: This grid type uses columns that scale and resize content and can use breakpoints to determine if the layout needs to change dramatically.
- Spacing: The spacing value can be any positive number, including decimals and any string.
- Responsive values: The grid layout supports all the responsive values like columns, columnSpacing, direction, rowSpacing, and spacing.
- Interactive: To make a grid layout interactive, use directions, justifyContent, and alignItems props.
- Auto-layout: The Auto-layout makes the items equitably share the available space and can set the width of one item and the others will automatically resize around it.
- Complex Grid: With the help of a grid layout, a complex layout can be made.
- Nested Grid: The container and item props are two independent booleans and can be combined to allow a Grid component to be both a flex container and child acting as a nested grid.
- Columns: We change the default number of columns (12) with the help of columns prop.
- Limitations: There are several limitations of grid layout like Negative margin, white-space: nowrap, direction: column | column-reverse.
- CSS Grid Layout: The grid layout is using CSS flexbox internally but we can use the system and CSS Grid to layout your pages.
- System props: The grid layout supports all system properties and can be used as props directly on the component.
- API: The API used in container layout is: <Grid />
Syntax:
<Grid>
...
</Grid>
Creating React Project:
Step 1: To create a react app, install react modules through the npm command.
npm create-react-app project name
Step 2: After creating your react project, move into the folder to perform different operations.
cd project name
Step 3: After creating the ReactJS application, Install the required module using the following command:
npm install @mui/material @emotion/react @emotion/styled
Project Structure:
Step to Run Application: Open the terminal and type the following command.
npm start
Example 1: Below example demonstrates the React MUI fluid grid layout.
Javascript
import { Grid, } from "@mui/material"; import { Box } from "@mui/system"; import * as React from "react"; function App() { return ( <center> <div> <h1 style={{ color: "green" }}>neveropen</h1> <h2>React MUI Grid Layout</h2> </div> <div style={{ width: "50%" }}> <Grid container spacing={3}> <Grid item xs={4}> <Box sx={{ backgroundColor: 'lightgreen', padding: 1, textAlign: 'center', }}> neveropen </Box> </Grid> <Grid item xs={5}> <Box sx={{ backgroundColor: 'lightgreen', padding: 1, textAlign: 'center', }}> neveropen </Box> </Grid> <Grid item xs={5}> <Box sx={{ backgroundColor: 'lightgreen', padding: 1, textAlign: 'center', }}> neveropen </Box> </Grid> <Grid item xs={4}> <Box sx={{ backgroundColor: 'lightgreen', padding: 1, textAlign: 'center', }}> neveropen </Box> </Grid> <Grid item xs={4}> <Box sx={{ backgroundColor: 'lightgreen', padding: 1, textAlign: 'center', }}> neveropen </Box> </Grid> <Grid item xs={5}> <Box sx={{ backgroundColor: 'lightgreen', padding: 1, textAlign: 'center', }}> neveropen </Box> </Grid> </Grid> </div> </center> ); } export default App; |
Output:
Example 2: Below example demonstrates the React MUI nested grid layout.
Javascript
import { Grid, } from "@mui/material"; import { Box } from "@mui/system"; import * as React from "react"; function GridComponent() { return ( <React.Fragment> <Grid item xs={4}> <Box sx={{ backgroundColor: 'lightblue', padding: 1, textAlign: 'center', }}> neveropen </Box> </Grid> <Grid item xs={6}> <Box sx={{ backgroundColor: 'lightblue', padding: 1, textAlign: 'center', }}> neveropen </Box> </Grid> <Grid item xs={6}> <Box sx={{ backgroundColor: 'lightblue', padding: 1, textAlign: 'center', }}> neveropen </Box> </Grid> <Grid item xs={4}> <Box sx={{ backgroundColor: 'lightblue', padding: 1, textAlign: 'center', }}> neveropen </Box> </Grid> </React.Fragment> ) } function App() { return ( <center> <div> <h1 style={{ color: "green" }}> neveropen </h1> <h2>React MUI Grid Layout</h2> </div> <div style={{ width: "50%" }}> <Grid container spacing={3}> <Grid container item spacing={2}> <GridComponent /> </Grid> <Grid container item spacing={2}> <GridComponent /> </Grid> </Grid> </div> </center> ); } export default App; |
Output:
Reference: https://mui.com/material-ui/react-grid
