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

Question

我在 reactjs 中使用 material-ui 网格。在列网格容器中，我想使用一个网格项，我想显示另一个网格项。我希望第三项用完其他 2 个网格项之间的剩余网格空间。 (即)我想展示

网格项目 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

您正在谈论有问题的列网格，但在代码片段中，使用了行。所以我假设一个列网格。
Naima 也提出了关于提供 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}，将占用可用空间