Grid布局下Accordion展开挤压下方整行内容问题求解

Grid默认行对齐规则为align-items: stretch，同一行内所有网格项会被拉伸至与该行最高项等高。当单个Accordion展开拉高自身所在网格项高度时，同行所有网格项都会被强制撑高，最终导致下方整行组件整体向下偏移。

• 第一步：修改Grid容器的对齐属性，添加alignItems: 'flex-start'，取消同行网格项强制拉伸的默认规则，让每个网格项高度仅由自身内容决定：

<Grid
  container
  spacing={2}
  sx={{ alignItems: 'flex-start' }}
>
  {/* 原有Accordion对应的Grid item无需改动结构，直接保留即可 */}
</Grid>

• 第二步：排查所有包裹Accordion的Grid子项，移除height: '100%'这类强制撑满容器高度的样式，确保子项高度可以跟随内部Accordion的展开/收起状态自适应。

调整完成后即可达到预期效果：展开任意Accordion时，仅当前组件所在网格项高度增加，其正下方同列的组件会随高度变化自然下移，同一行其他列的Accordion会保持原有位置，不会出现整行偏移的问题。

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