网格对齐问题

Question

我需要生成的是左侧的 3 个网格项和右侧的 2 个网格项。我尝试在第二个网格容器上使用 float ，但它没有按我想要的方式工作。网格还包含复选框等元素，所以我不确定这是否会改变对齐方式。

<Grid container xs={12} md={6}>
  <Grid item xs={12} md={6}> 1 </Grid>
  <Grid item xs={12} md={6}> 2</Grid>
  <Grid item xs={12} md={6}> 3</Grid>
</Grid>
<Grid container xs={12} md={6}>
  <Grid item xs={12} md={6}> 4 </Grid>
  <Grid item xs={12} md={6}> 5</Grid>
</Grid>

预期： MD：

1     4
2     5
3

实际：

MD：

1   4
2
    5
3

xs：

1 
2
3
4
5

Answer 1

您可以将两列都放入另一个容器中并将它们设为项目：

  <Grid container>
    <Grid item xs={12} md={6}>
      <Grid item xs={12} md={6}>1</Grid>
      <Grid item xs={12} md={6}>2</Grid>
      <Grid item xs={12} md={6}>3</Grid>
    </Grid>
    <Grid item xs={12} md={6}>
      <Grid item xs={12} md={6}>4</Grid>
      <Grid item xs={12} md={6}>5</Grid>
    </Grid>
  </Grid>