如何将卡片与 MUI 对齐？

Question

I've created a grid that displays cards using MUI, but the cards are 'stuck' to the left side of the page. I've tried justify='center' , mx: 'auto' and alignItems='center' but the cards stay stuck to the left. I'm sure I'm using some prop that overrides my attempts, but I can't find documentation that speaks to my issue. Below is the code:

export default function Home() {
  return (
    <Box sx={{ flexGrow: 1, mt: 6 }}>
      <Grid container spacing={{ xs: 2, md: 3 }} columns={{ xs: 4, sm: 8, md: 12 }}>
        {Array.from(Array(6)).map((_, index) => (
          <Grid item xs={2} sm={4} md={4} key={index}>
            <ProductCard />
          </Grid>
        ))}
      </Grid>
    </Box>
  );
}

Below is what React is rendering.

Answer 1

you can to in grid like this:

  <Grid item xs={2} sm={4} md={4} key={index} alignItems="center" justify="center">
     <ProductCard />
  </Grid>