MUI Box嵌套Grid实现卡片水平垂直等间距问题求助

你当前代码中导致间距不一致的主要原因有两个：一是Grid容器的overflowY属性语法错误，二是Grid Item未明确宽度，导致布局计算异常。以下是修复后的代码，同时保留所有你需要的Box元素：

import * as React from 'react';
import Box from '@mui/material/Box';
import Paper from '@mui/material/Paper';
import Grid from '@mui/material/Grid';


const list_label = [
  'T1 ',
  'T2 ',
  'T3 ',
  'T4 ',
  'T5 ',
  'T6 ',
  'T7 ',
  'T8 ',
  'T9 ',
  'T10 ',
  'T11 ',
  'T12 ',
  'T13 ',
];

export default function TestBasicGrid() {
  return (
    <Box sx={{
      display: 'flex',
      flexDirection: 'row',
      height:800,
      width:'100%',
      flexGrow: 1,
      alignContent:'flex-start'
    }}>
      <Box sx={{
        display: 'flex',
        flexDirection: 'row',
        height:'100%',
        width:'100%',
        alignContent:'flex-start'
      }}>
        <Box sx={{
                display: 'flex',
                flexDirection: 'column',
                border:'3px solid black',
                width:'100%',
                height:'100%',
                alignContent:'flex-start'
              }}>
          <Box
          sx={{ height: '100%',
                  display: 'flex',
                  flexDirection: 'column',
                  border:'3px solid green',
                  padding: 2,
                  paddingTop:10,
                  paddingLeft:10,
                  paddingBottom:10,
                  alignContent:'flex-start'

              }}>
            <Grid container
                  rowSpacing={3} // 统一设置行间距，可按需调整数值
                  columnSpacing={3} // 统一设置列间距，与行间距数值保持一致
                  justifyContent='flex-start'
                  alignItems='flex-start' 
                  sx={{ flexGrow: 1,
                        overflowY: 'scroll', // 修复语法错误
                    }}>
              {list_label.map((label) => (
                <Grid item key={label} sx={{ width: 150 }}> {/* 给Item设置固定宽度，匹配Paper宽度 */}
                  <Paper sx={{
                      height: 120,
                      width: 150,
                      backgroundColor: 'red'}}>{label}</Paper>
                </Grid>
              ))}
            </Grid>
          </Box>
        </Box>
      </Box>
      </Box>
  );
}

关键修改说明： #

• 修复了Grid容器中overflowY的语法错误，移除多余转义引号，确保滚动容器高度计算正常，避免行间距因容器高度异常错乱。
• 给每个Grid item添加固定宽度（与内部Paper宽度一致），让MUI Grid能准确计算列间距，保证水平间距均匀。
• 将rowSpacing和columnSpacing设置为相同数值，确保水平和垂直间距完全一致，你可根据视觉需求调整数值（如2、3、4等）。
• 所有原有Box元素结构完全保留，不影响后续代码扩展。

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