如何实现Material UI中Card卡片的等高布局？

实现步骤 #

• 强制GridListTile高度撑满父容器，内部Card元素填充满Tile
• 固定卡片顶部图片高度，避免图片尺寸差异导致高度不一致
• 卡片文本区域使用弹性布局适配剩余高度，过长内容可做截断或滚动处理

样式定义 #

import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles(() => ({
  // GridListTile样式：强制高度100%
  gridTile: {
    height: '100%',
  },
  // Card根样式：高度100%，纵向弹性布局
  cardRoot: {
    height: '100%',
    display: 'flex',
    flexDirection: 'column',
  },
  // 顶部图片样式：固定高度
  cardMedia: {
    height: 140,
  },
  // 文本区域样式：填充剩余高度，可加文本截断
  cardContent: {
    flexGrow: 1,
    // 可选：3行文本超出显示省略号
    display: '-webkit-box',
    WebkitLineClamp: 3,
    WebkitBoxOrient: 'vertical',
    overflow: 'hidden',
  },
}));

组件调用示例 #

export default function ImageGridList() {
  const classes = useStyles();

  return (
    <GridList cellHeight={180} cols={3}>
      {tileData.map((tile) => (
        <GridListTile key={tile.img} className={classes.gridTile}>
          <Card className={classes.cardRoot}>
            <CardMedia
              className={classes.cardMedia}
              image={tile.img}
              alt={tile.title}
            />
            <CardContent className={classes.cardContent}>
              <Typography gutterBottom variant="h6" component="h3">
                {tile.title}
              </Typography>
              <Typography variant="body2" color="textSecondary">
                {tile.description}
              </Typography>
            </CardContent>
            {/* 卡片底部操作栏可正常添加，会自动排在底部 */}
          </Card>
        </GridListTile>
      ))}
    </GridList>
  );
}

可选配置 #

如果不需要截断文本，希望完整展示所有内容同时保持卡片等高，可修改cardContent样式开启滚动：

cardContent: {
  flexGrow: 1,
  overflowY: 'auto',
  maxHeight: 200,
}

内容的提问来源于stack exchange，提问作者Arti Pandey