React Material UI网格系统

Question

我正在映射数组并填充卡布局 但我不能连续保留5张卡片的布局

仅6或4

有人可以帮助我吗？

<Container maxWidth='lg'>
  <Grid container spacing={2}>
    {products.map(product => (
      <Grid item lg={2} md={3} sm={12} xs={12} key={product.id}>
        <Card className={classes2.card}>
          <CardMedia
            className={classes2.media}
            image={`http://localhost:8000/uploads/${product.img}`}
          />
          <CardContent className={classes2.content}>
            <Typography className={classes2.name} variant={'h6'} gutterBottom>
              {product.name}
            </Typography>
            <Typography className={classes2.price} variant={'h1'}>
              {util.formatCurrency(product.price)}
            </Typography>
          </CardContent>
        </Card>
      </Grid>
    ))}
  </Grid>
</Container>

图片：

images on site