MUI Quilted Grid Layout实现网格项按尺寸自适应排布

注：截图为缩小缩放状态，内容显示较小。

在React项目中使用MUI动态渲染嵌套Card组件（数据为嵌套结构，递归渲染子组件），遇到以下问题：

• 每个Grid容器内包含Card组件，Card内部又嵌套Grid与子Card组件，需要所有卡片适配页面尺寸，填满可用布局空间。
• 第二行第二列的Grid组件无法自动上移对齐到第一行第二列Grid组件的底部，中间存在空白空隙。

目标实现效果：quilted grid layout（错落式绗缝网格布局）

现有实现代码 #

const useStyles = makeStyles({
  gridContainer: {
    paddingLeft: "85px",
    paddingRight: "85px",
  },
  root: {
    minWidth: 200,
  },
  bullet: {
    display: "inline-block",
    margin: "0 2px",
    transform: "scale(0.8)",
  },
  title: {
    fontSize: 14,
  },
  pos: {
    marginBottom: 12,
  },
  parentFlexRight: {
    display: "flex",
    justifyContent: "flex-end",
  },
  leftAlignItem: {
    marginRight: "auto",
    marginTop: "auto",
  },
  stretch: { height: "100%" },
  item: {
    display: "flex",
    flexDirection: "column",
  },
});

var checkIndex = 0;
const renderCourseRequirements = (RequiredCourses) => {
  return (
    <Grid
      container
      spacing={0}
      direction="column"
      alignItems="center"
      justifyContent="center"
    >
      {RequiredCourses.map((course, index) => {
        var Index = checkIndex;
        checkIndex = checkIndex + 1;
        return (
          <Grid key={index} item xs={12} sm={6} md={4}>
            <Card sx={{ width: 200 }} variant="outlined">
              <CardContent>
                <Typography color="textSecondary" gutterBottom>
                  {course}
                </Typography>
                <Checkbox
                  id={`custom-checkbox-${Index}`}
                  name={course}
                  value={course}
                  checked={checkedState.includes(course)}
                  onChange={() => handleOnChange(course)}
                />
              </CardContent>
            </Card>
          </Grid>
        );
      })}
    </Grid>
  );
};
const renderComponents = (components) => {
  return (
    <Grid
      container
      spacing={0}
      direction="column"
      alignItems="center"
      justifyContent="center"
    >
      {components.map((component, index) => {
        return (
          <Grid
            container
            spacing={0}
            direction="column"
            alignItems="stretch"
            justifyContent="center"
            key={index}
            item
            xs={12}
            sm={6}
            md={4}
          >
            <Card className={classes.root} variant="outlined">
              <CardContent>
                <Typography
                  className={classes.title}
                  color="textSecondary"
                  gutterBottom
                >
                  {component.component_name}
                </Typography>
                <Typography className={classes.pos} color="textSecondary">
                  Required Number of Courses: {component.required_num_courses}
                </Typography>
                {renderCourseRequirements(component.course_list)}
              </CardContent>
            </Card>
          </Grid>
        );
      })}
    </Grid>
  );
};

const renderComponentFamilies = (componentFamilies) => {
  return (
    <Grid container spacing={4} className={classes.item}>
      {componentFamilies.map((componentFamily, index) => {
        if (componentFamily.component_list.length > 1)
          return (
            <Grid key={index} xs={8} sm={6} md={4}>
              <Card className={classes.stretch} variant="outlined">
                <CardContent>
                  <Typography
                    className={classes.title}
                    color="textSecondary"
                    gutterBottom
                  >
                    {componentFamily.component_family_name}
                  </Typography>
                  <Typography className={classes.pos} color="textSecondary">
                    Required Number of Components :{" "}
                    {componentFamily.required_num_components}
                  </Typography>
                  {renderComponents(componentFamily.component_list)}
                </CardContent>
              </Card>
            </Grid>
          );
        return (
          <>
            <Grid key={index} item xs={12} sm={6} md={4}>
              {renderComponents(componentFamily.component_list)}
            </Grid>
          </>
        );
      })}
    </Grid>
  );
};

1. 外层负责排列卡片的Grid错误设置了direction="column"，flex布局纵向排列时元素只会垂直向下排布，不会横向换行补位，直接导致空隙出现。
2. Grid属性使用不规范：部分子项Grid缺失item属性，部分同时声明container和item的Grid未设置高度撑满规则，导致卡片无法填满分配的布局空间。
3. MUI默认Grid是基于flex的一维布局，同一行元素会按行内最高高度对齐，天生不支持错落式绗缝/瀑布流的自动补位效果，必须用专门的布局方案实现。

1. 基础属性修正 #

• 最外层排列顶级卡片的Grid容器删除direction="column"配置，保持默认row方向，这是横向换行排布的基础。
• 所有布局子项Grid必须加item属性，renderComponentFamilies中多组件分支返回的Grid项缺失item，直接补上。
• 给所有item级Grid加alignSelf: 'stretch'样式，内部Card统一加height: 100%，即可实现卡片自动填满可用空间。
• 去掉布局容器上冗余的alignItems="center"、justifyContent="center"，内容居中需求放到CardContent上实现，避免破坏Grid宽度分配规则。

2. 实现绗缝布局（两种方案选其一即可） #

方案一：使用MUI官方Masonry组件（适配成本最低） #

MUI v5+ 专门提供了Masonry组件实现错落式布局，和现有MUI生态完全适配，不需要手动写CSS兼容：

• 首先引入组件：

import Masonry from '@mui/lab/Masonry';

• 把renderComponentFamilies中最外层的Grid容器替换为Masonry即可，子项结构不需要改动：

<Masonry
  columns={{ xs: 1, sm: 2, md: 3 }} // 和之前设置的sm={6}、md={4}列数对应
  spacing={4}
  className={classes.gridContainer}
>
  {/* 原有map渲染的顶级Grid项直接放这里 */}
</Masonry>

组件会自动计算每个卡片的高度，自动填充上方空隙，完全匹配绗缝布局效果。

方案二：使用CSS Grid原生实现（无额外依赖） #

如果不想引入额外组件，可以直接给最外层容器用CSS Grid规则实现错落布局，替换原有gridContainer样式：

gridContainer: {
  paddingLeft: "85px",
  paddingRight: "85px",
  display: 'grid',
  gridTemplateColumns: 'repeat(3, 1fr)', // md断点3列
  gap: '32px', // 对应原spacing={4}的间距
  gridAutoRows: 'min-content',
  '& > *': {
    breakInside: 'avoid' // 避免卡片内部被截断
  },
  // 响应式适配
  '@media (max-width:900px)': {
    gridTemplateColumns: 'repeat(2, 1fr)' // sm断点2列
  },
  '@media (max-width:600px)': {
    gridTemplateColumns: '1fr' // xs断点1列
  }
}

这种方案不需要引入额外组件，原生CSS支持的浏览器都可以正常实现自动补位效果。

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