I need to center align items within the material-UI grid, with the alignment depending on the number of items. For instance, if there are 5 items, 3 items should be aligned side by side in the center and the remaining 2 items should also be centered. Please refer to the image for clarification.
https://i.sstatic.net/ccE6W.jpg
const useStyles = makeStyles((theme) => ({
root: {
minHeight: "100vh",
display: "flex",
justifyContent: "center",
alignItems: "center",
},
}));
export default function BlogPostList() {
const classes = useStyles();
return (
<div className={classes.root}>
<Grid container spacing={3}>
<Grid item xs={12} sm={6} md={4}>
<BlogPostCard />
</Grid>
<Grid item xs={12} sm={6} md={4}>
<BlogPostCard />
</Grid>
<Grid item xs={12} sm={6} md={4}>
<BlogPostCard />
</Grid>
<Grid item xs={12} sm={6} md={4}>
<BlogPostCard />
</Grid>
<Grid item xs={12} sm={6} md={4}>
<BlogPostCard />
</Grid>
</Grid>
</div>
);
}