Im completely new to Material UI and im trying to make use of Grid concept to position my components in much dynamic way. I would like to create the grids in the following pattern and i'm stuck in finding out a solution to create two column grid having different number of rows or items.
Below is the sample layout which im trying to design using grids so, can somebody please share any ideas to achieve it?
Sample code would be more helpful. Screenshot of my planned design
Here is sample code I've tried. I have used breakpoint lg
for my desktop screen. To make it responsive for all screens you can play with all breakpoints (xs, sm, md, lg, and xl).
Grid Code:
<Grid container style={{ height: '100vh', backgroundColor:grey[100] }}>
<Grid item lg={4} style={{ height: '100%' }}>
<Grid container direction="row" style={{ height: '100%' }}>
<Grid item xs={12} lg={12} style={{ height: '20%', alignContent:'center' }}>
<ComponentText/>
</Grid>
<Grid item xs={12} lg={12} style={{ height: '80%', alignContent:'center' }}>
<ComponentA/>
</Grid>
</Grid>
</Grid>
<Grid item lg={8} style={{ height: '100%' }}>
<Grid container direction="row" style={{ height: '100%' }}>
<Grid item xs={12} style={{ height: '50%', alignContent:'center', padding:12 }}>
<ComponentB/>
</Grid>
<Grid item xs={12} style={{ height: '50%', alignContent:'center', padding:12 }}>
<ComponentC/>
</Grid>
</Grid>
</Grid>
</Grid>
Full code:
import { Box, Grid, Typography } from '@mui/material';
import { green, grey, yellow } from '@mui/material/colors';
const ReusableComponent = ({ title, bgColor }) => {
return (
<Box sx={{
height: '100%',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: bgColor,
border: `8px solid ${yellow[700]}`, // Added white border
}}>
<Typography variant="h6" textAlign='center'>
{title}
</Typography>
</Box>
);
};
const ComponentA = () => <ReusableComponent title="Component A" bgColor={green[900]}/>;
const ComponentB = () => <ReusableComponent title="Component B" bgColor={green[800]}/>;
const ComponentC = () => <ReusableComponent title="Component C" bgColor={green[700]}/>;
const ComponentText = () => <ReusableComponent title="Some Text" bgColor={green[600]}/>;
const ResponsiveLayout = () => {
return (
<Grid container style={{ height: '100vh', backgroundColor:grey[100] }}>
<Grid item lg={4} style={{ height: '100%' }}>
<Grid container direction="row" style={{ height: '100%' }}>
<Grid item xs={12} lg={12} style={{ height: '20%', alignContent:'center' }}>
<ComponentText/>
</Grid>
<Grid item xs={12} lg={12} style={{ height: '80%', alignContent:'center' }}>
<ComponentA/>
</Grid>
</Grid>
</Grid>
<Grid item lg={8} style={{ height: '100%' }}>
<Grid container direction="row" style={{ height: '100%' }}>
<Grid item xs={12} style={{ height: '50%', alignContent:'center', padding:12 }}>
<ComponentB/>
</Grid>
<Grid item xs={12} style={{ height: '50%', alignContent:'center', padding:12 }}>
<ComponentC/>
</Grid>
</Grid>
</Grid>
</Grid>
);
};
export default ResponsiveLayout;
Migration Guide:
Ref: https://mui.com/material-ui/migration/upgrade-to-v6/#grid2
Ref: https://mui.com/material-ui/migration/migration-grid-v2/