Grid布局实现左3右2个item时md断点对齐异常如何解决?

• 缺少外层公共Grid容器包裹两个分栏用的Grid，两个设置了md={6}的Grid容器默认是块级元素，即使设置float也会因为容器高度不一致出现内容错位
• 内层Grid item错误设置了md={6}，你预期每个分栏内的元素垂直排列，应该让每个内层item占满所在分栏的宽度，设为md={12}才对
• 内部的Checkbox元素只要没有额外设置浮动、绝对定位等脱离文档流的属性，不会影响Grid布局的对齐

修改为如下嵌套Grid结构即可，外层容器负责左右分栏，两个内层容器分别承载左右侧的垂直排列元素：

<Grid container spacing={2}> {/* 最外层公共容器，spacing可根据需要调整间距 */}
  {/* 左侧分栏：md下占6列，xs下占12列，同时作为容器承载内部3个item */}
  <Grid item xs={12} md={6} container>
    <Grid item xs={12} md={12}> 1 </Grid>
    <Grid item xs={12} md={12}> 2 </Grid>
    <Grid item xs={12} md={12}> 3 </Grid>
  </Grid>
  {/* 右侧分栏：md下占6列，xs下占12列，同时作为容器承载内部2个item */}
  <Grid item xs={12} md={6} container>
    <Grid item xs={12} md={12}> 4 </Grid>
    <Grid item xs={12} md={12}> 5 </Grid>
  </Grid>
</Grid>

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