Quiero alinear los elementos centrales en la cuadrícula de la interfaz de usuario del material, pero la situación debe depender del recuento de elementos. Por ejemplo, si tenemos 5 elementos, 3 elementos deben estar uno al lado del otro en el centro y los otros 2 elementos deben estar en el centro. Por favor revise la imagen.

 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> ); }