Html 有没有办法在GridList中制作位置卡而不是使用GridListTile？

我试图实现一个网格列表风格的布局，但与卡。我不喜欢GridListTile如何覆盖在图像顶部，也不喜欢标题栏的透明度。我的想法是将一张卡片放在网格列表中，但我得到了一个非常混乱的放大图像网格。这个想法可能吗

root: {
    display: 'flex',
    flexWrap: 'wrap',
    justifyContent: 'space-around',
    overflow: 'hidden',
    background: theme.palette.background.paper,
    textAlign: 'left',
    padding: '0 8px'
  },
  container: {
    minWidth: '100%',
    paddingBottom: '14px'
  },
  gridList: {
    width: '100%',
    minHeight: 200,
    padding: '16px 0 10px',
    //paddingBottom: theme.spacing(200)

  },
  title: {
    padding:`${theme.spacing(3)}px ${theme.spacing(2.5)}px ${theme.spacing(2)}px`,
    color: theme.palette.openTitle,
    width: '100%',
    paddingBottom: theme.spacing(200)
  },
  tile: {
    textAlign: 'center',
    paddingtop: theme.spacing(200)
  },
  image: {
    height: '100%'
  },
  tileBar: {
    backgroundColor: 'rgba(0, 0, 0, 0.72)',
    textAlign: 'left',
    marginTop: theme.spacing(200)
  },
  tileTitle: {
    fontSize:'1.1em',
    marginBottom:'5px',
    color:'rgb(189, 222, 219)',
    display:'block'
  },
  card: {
    textAlign: 'center',
    paddingBottom: theme.spacing(2)
  }

{props.products.length>0？
(
{props.products.map（（产品，i）=>(
))}
)：props.searched&（未找到任何产品！：（））

 <div className={classes.root}>
      {props.products.length > 0 ?
        (<div className={classes.container}>
          <GridList cellHeight={185} className={classes.gridList} cols={3}>
          {props.products.map((product, i) => (
            <Card  className={classes.card}>
            <CardActionArea className={classes.card}>
              <CardMedia>
            <GridListTile key={i} className={classes.tile}>
              <Link to={"/product/"+product._id}><img className={classes.image} src={'/api/product/image/'+product._id} alt={product.name} /></Link>
              
            </GridListTile>
            </CardMedia>
            <CardContent>
            <GridListTileBar className={classes.tileBar}
                title={<Link to={"/product/"+product._id} className={classes.tileTitle}>{product.name}</Link>}
                subtitle={<span>$ {product.price}</span>}
                actionIcon={
                  <AddToCart item={product}/>
                }
              />
            </CardContent>
            </CardActionArea>
            </Card>
          ))}
        </GridList></div>) : props.searched && (<Typography variant="subheading" component="h4" className={classes.title}>No products found! :(</Typography>)}
      </div>