固定尺寸的复杂ListItem材质用户界面

Question

我正在material-ui中创建一个复杂的元素列表，用作一个表。 它在每一行中都有多个字段，但是其中一些字段可能为空，并且内容的大小不是固定的，因此有些奇怪。

我了解了网格，但是我不知道这是否是解决方案。

这是行渲染器：

    const row = ({ basicInfo, id, prices }) => (
    <>
      <ListItem className={classes.listItem}>
        <ListItemAvatar>
          <Avatar
            className={classes.avatar}
            src={basicInfo.photo}
          />
        </ListItemAvatar>
        <Link color="inherit" component={RouterLink} to={`/app/influencers/${id}/basicInfo`}>
          <ListItemText primary={basicInfo.name} secondary={getAge(basicInfo.date)} />
        </Link>
        <ListItemText>{basicInfo.fa}</ListItemText>
        <ListItemText>{basicInfo.fe}</ListItemText>
        <ListItemText>
          <Badge badgeContent={basicInfo.engagement} color="error" />
        </ListItemText>
        <ListItemText>{basicInfo.likes}</ListItemText>
        <ListItemText>{basicInfo.comments}</ListItemText>
        <ListItemText>
          R$
          {prices.postPrice}
        </ListItemText>
        <ListItemText>
          R$
          {prices.storyPrice}
        </ListItemText>
        <ListItemText>
          R$
          {prices.comboPrice}
        </ListItemText>
        <Button color="primary" component={RouterLink} size="small" to={`/app/influencers/${id}/basicInfo`} variant="outlined">
          Detalhe
        </Button>
      </ListItem>
      <Divider variant="inset" component="li" />
    </>
  );

这是我的示例：

那么，我该如何设置固定大小并将行元素彼此水平对齐呢？