React MUI Grid Layout Examples
Example 1: React MUI Fluid Grid
Below example demonstrates the React MUI fluid grid layout.
import {
Grid,
} from "@mui/material";
import { Box } from "@mui/system";
import * as React from "react";
function App() {
return (
<center>
<div>
<h1 style={{ color: "green" }}>w3wiki</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', }}>
w3wiki
</Box>
</Grid>
<Grid item xs={5}>
<Box sx={{ backgroundColor: 'lightgreen',
padding: 1, textAlign: 'center', }}>
w3wiki
</Box>
</Grid>
<Grid item xs={5}>
<Box sx={{ backgroundColor: 'lightgreen',
padding: 1, textAlign: 'center', }}>
w3wiki
</Box>
</Grid>
<Grid item xs={4}>
<Box sx={{ backgroundColor: 'lightgreen',
padding: 1, textAlign: 'center', }}>
w3wiki
</Box>
</Grid>
<Grid item xs={4}>
<Box sx={{ backgroundColor: 'lightgreen',
padding: 1, textAlign: 'center', }}>
w3wiki
</Box>
</Grid>
<Grid item xs={5}>
<Box sx={{ backgroundColor: 'lightgreen',
padding: 1, textAlign: 'center', }}>
w3wiki
</Box>
</Grid>
</Grid>
</div>
</center>
);
}
export default App;
Output:
Example 2: React MUI Nested Grid
Below example demonstrates the React MUI nested grid layout.
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', }}>
w3wiki
</Box>
</Grid>
<Grid item xs={6}>
<Box sx={{ backgroundColor: 'lightblue',
padding: 1, textAlign: 'center', }}>
w3wiki
</Box>
</Grid>
<Grid item xs={6}>
<Box sx={{ backgroundColor: 'lightblue',
padding: 1, textAlign: 'center', }}>
w3wiki
</Box>
</Grid>
<Grid item xs={4}>
<Box sx={{ backgroundColor: 'lightblue',
padding: 1, textAlign: 'center', }}>
w3wiki
</Box>
</Grid>
</React.Fragment>
)
}
function App() {
return (
<center>
<div>
<h1 style={{ color: "green" }}>
w3wiki
</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
React MUI Grid Layout
React MUI Grid layout is a responsive layout grid that adapts to screen size and orientation, ensuring consistency across layouts.
Contact Us