I want to align center items in the material-UI grid but the situation must depend on item count. For example, if we have 5 items, 3 items must be side by side in the center and the other 2 items must be in the center. Please check the image.

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