material UI grid layout design

Question

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

Answer 1

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).

Screenshot of result:

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;

Update: Grid is deprecated. stable Grid2 is available in MUI v6

Migration Guide:
Ref: https://mui.com/material-ui/migration/upgrade-to-v6/#grid2
Ref: https://mui.com/material-ui/migration/migration-grid-v2/