I am currently working with material-ui and encountering a roadblock. My goal is to design a homepage for a dashboard where the various services are listed. I am attempting to organize these 6 buttons into 2 rows and 3 columns, totaling 6 buttons in all. As someone who is new to grid logic, I'm struggling to achieve this. Any guidance on how to accomplish this would be greatly appreciated. Thank you. https://i.sstatic.net/BsR3P.png
Essentially, my aim is to maintain this layout across all screens except for mobile devices. https://i.sstatic.net/BMLvZ.png Here is the snippet of code I have been working on:
const useStyles = makeStyles((theme) => ({
root: {
display: 'flex',
justifyContent: "center",
marginTop: '300px',
},
}));
export default function Menu() {
const classes = useStyles();
return (
<div className={classes.root}>
<Grid container spacing={1}>
<Grid container item xs={3} spacing={3}>
<Button
style={{ width: '300px', padding: '60px', margin: '15px' }}
variant='contained' color='Default'>
<AddIcon />Study
</Button>
</Grid>
<Grid container item xs={3} spacing={3}>
<Button
style={{ width: '300px', padding: '60px', margin: '15px' }}
variant='contained' color='Default'>
<AddIcon />All Studies
</Button>
</Grid>
<Grid container item xs={3} spacing={3}>
<Button
style={{ width: '300px', padding: '60px', margin: '15px' }}
variant='contained' color='Default'>
<AddIcon />Planning
</Button>
</Grid>
<Grid container item xs={3} spacing={3}>
<Button
style={{ width: '300px', padding: '60px', margin: '15px' }}
variant='contained' color='Default'>
<AddIcon />Products
</Button>
</Grid>
<Grid container item xs={3} spacing={3}>
<Button
style={{ width: '300px', padding: '60px', margin: '15px' }}
variant='contained' color='Default'>
<AddIcon />Platform
</Button>
</Grid>
<Grid container item xs={3} spacing={3}>
<Button
style={{ width: '300px', padding: '60px', margin: '15px' }}
variant='contained' color='Default'>
<AddIcon />Clients
</Button>
</Grid>
</Grid>
</div>
)
}