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.
Essentially, my aim is to maintain this layout across all screens except for mobile devices. 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>
)
}