React+MUI菜单双列布局问题：消除间距并适配内容宽度

问题核心是你用repeat(2, 1fr)会强制两列平分容器宽度，哪怕内容不需要这么宽，自然会出现大间距；而固定容器宽度又会限制内容展示导致换行。可以通过以下调整解决：

具体修改方案 #

1. 调整Grid列宽规则：把gridTemplateColumns: 'repeat(2, 1fr)'改成gridTemplateColumns: 'auto auto'，让每列宽度完全适配自身内容，避免强制平分宽度。
2. 容器宽度自适应：移除width: '60%'这类固定宽度设置，改用width: 'fit-content'或者直接不设宽度，让容器由内部内容撑开，从根源避免文本换行。
3. 简化容器布局：原本的Stack direction="row"和grid布局存在属性冲突，直接用Box代替作为grid容器更简洁，减少不必要的flex属性干扰。

修改后的代码 #

const MenuGroupSection = ({ label, groups, menuVariant, onItemClick }: 
  MenuGroupSectionProps) => {
  return (
    <Stack direction="column" sx={{ width: '100%' }}>
      {label !== undefined && label !== null ? (
        <Box sx={{ margin: '16px', marginBottom: '8px' }}>
          <Typography variant="body2semibold" sx={{ color: '#000000' }}>
            {label}
          </Typography>
        </Box>
      ) : null}
      {/* 用Box替代Stack作为grid容器，调整布局属性 */}
      <Box sx={{ display: 'grid', gridTemplateColumns: 'auto auto', gap: '8px' }}>
        {groups?.map((group, index) => (
          <MenuItemGroup
            key={index}
            label={group.label}
            items={group.items as MenuItemNode[]}
            onItemClick={onItemClick}
            menuVariant={menuVariant}
          />
        ))}
      </Box>
    </Stack>
  );
};

额外说明 #

• 如果需要限制最大宽度，避免菜单过宽，可以给外层Stack或者grid容器加maxWidth: 'xxxpx'，同时配合overflowX: 'auto'确保内容不会溢出。
• gap属性可以根据视觉需求调整数值，控制列和行之间的间距，比直接设margin更规整。

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