使用direction='column'和flexWrap='wrap'的MUI Grid列宽不一致问题

核心问题原因 #

当Grid2设置direction="column" + flexWrap="wrap"时，会以纵向排列并换行生成多列，但默认列宽由内容撑开。嵌套Grid容器因为自身默认布局特性，会导致所在列被撑宽，破坏列宽一致性。

具体解决步骤 #

1. 外层Grid配置强制列宽平分：给外层Grid添加gridAutoColumns: '1fr'，让所有自动生成的列平分容器宽度；同时设置width: '100%'确保容器有明确的可用空间。
2. 嵌套Grid限制宽度：给嵌套的Grid容器设置width: '100%'，让它继承所在列的宽度，避免自身内容撑大列宽。

修正后的代码示例 #

import { Grid } from '@mui/material/Unstable_Grid2';

function ColumnWrapEqualWidth() {
  return (
    <Grid
      container
      direction="column"
      flexWrap="wrap"
      sx={{
        width: '100%',
        height: 400, // 设置高度触发换行（根据你的需求调整）
        gridAutoColumns: '1fr', // 关键：所有列平分宽度
        gap: 2,
        border: '1px solid #eee'
      }}
    >
      {/* 普通子元素 */}
      <Grid sx={{ bgColor: '#f5f5f5', p: 2 }}>普通内容块</Grid>

      {/* 嵌套Grid容器 */}
      <Grid container sx={{ width: '100%', bgColor: '#e0e0e0', p: 2 }}>
        <Grid>嵌套子项1</Grid>
        <Grid>嵌套子项2</Grid>
      </Grid>

      {/* 其他子元素 */}
      <Grid sx={{ bgColor: '#f5f5f5', p: 2 }}>更长内容的普通块，测试宽度一致性</Grid>
      <Grid sx={{ bgColor: '#f5f5f5', p: 2 }}>另一块内容</Grid>
    </Grid>
  );
}

export default ColumnWrapEqualWidth;

可选调整 #

如果需要固定列宽而非平分，将gridAutoColumns改为固定值即可，比如：

gridAutoColumns: '240px',
// 外层可加横向滚动处理溢出
sx={{ ..., overflowX: 'auto' }}

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