如何在reactjs Material-ui中制作使用剩余网格空间的网格项？

Question

我在reactjs中使用material-ui网格。在列网格容器中，我想使用一个网格项，并且想显示另一个网格项。我希望第三个项目用完其他两个网格项目之间的剩余网格空间。（即）我想表现得像

网格项目 1

//剩余网格空间

网格项目 2

我努力了

<Grid container direction="column">
 <Grid item xs={12}>
  Grid Item 1
 </Grid>
 <Grid item xs={12} /> // this makes a space but not the entire space
 <Grid item xs={12}>
  Grid Item 2
 </Grid>

我怎样才能做到这一点？

Answer 1

您正在谈论有问题的列网格，但在代码片段中，使用了行。所以我假设一个列网格。
奈玛对于给予也提出了一个正确的观点xs={12]}。如果您提供 12 个，那么它将占用整个行/空间。

<Grid container direction="column">
  <Grid item xs={3}>
    Grid Item 1
  </Grid>
  <Grid item xs={true}>
    // this makes a space but not the entire space
  </Grid>
  <Grid item xs={3}>
    Grid Item 2
  </Grid>
</Grid>

设置xs={true}，将占用可用空间