使用 material-ui 的 Grid 组件，如何在另一个表内嵌套一个表？

Question

我正在创建一个React 16.13.0应用程序，并尝试使用material-ui Grid组件。 我在将Grid嵌套在Grid中时遇到了问题。 我想把这个表嵌套在

          <Grid container item spacing={2}>
            <Grid item xs={1}>Icon</Grid>
            <Grid item xs={1}>mission pick up window {mission.pickUpLocation}</Grid>
          </Grid>

在一个较大的表格中，我希望 "图标 "单元格和另一个单元格在同一行。 在上面的例子中，我希望 "Icon "单元格和其他单元格在同一行。然而，当我把它放在一个较大的表格中时

<Grid container spacing={1} alignItems="center">
  <React.Fragment key={`content-item-${mission.id}`}>
    <Grid container direction="column">
      <Grid item container spacing={2}>
        <Grid item xs={1}>
          PICK Up
        </Grid>
        <Grid container item xs={1}>
          <Grid container item spacing={2}>
            <Grid item xs={1}>Icon</Grid>
            <Grid item xs={1}>mission pick up window {mission.pickUpLocation}</Grid>
          </Grid>
          <Grid container item spacing={2}>
            <Grid item xs={1}>Icon</Grid>
            <Grid item xs={1}>mission pick up location {mission.pickUpLocation}</Grid>
          </Grid>
        </Grid>
      </Grid>
    </Grid>

图标单元格的上方会出现 "任务领取窗口 "的文字。

我的Grid的正确结构方式是什么？

Answer 1

网格并不完全是一个表格，但如果你想嵌套网格，你可以只在网格容器里面的网格项。

  <Grid container spacing={3}>
    <Grid item xs={12} sm={6}>
      <Paper className={classes.paper}>xs=12 sm=6</Paper>
    </Grid>
    <Grid item xs={12} sm={6}>
      <Paper className={classes.paper}>xs=12 sm=6</Paper>
    </Grid>
    <Grid item xs={12} sm={6}>
      This grid is nested:
      <Grid container>
        <Grid item xs={12} sm={6}>
          <Paper className={classes.paper}>xs=12 sm=6</Paper>
        </Grid>
        <Grid item xs={12} sm={6}>
          <Paper className={classes.paper}>xs=12 sm=6</Paper>
        </Grid>
      </Grid>
    </Grid>
    <Grid item xs={12} sm={6}>
      Here there is no nested grid:
      <Paper className={classes.paper}>xs=12 sm=6</Paper>
    </Grid>
  </Grid>

你可以在这里看到它的动作。https:/codesandbox.iosmaterial-nested-grid-9s7lq?file=demo.js。

在你的代码中，你把一个Grid-Item放在另一个Grid-Item里面（你不应该这样做），也把一个Grid-Container放在另一个Grid-Container里面（也不好）。

一般来说，这是你需要记住的。

• Grid容器是网格项的包装。
• 如果你想有一个嵌套的网格--把一个新的Grid-Container放在一个grid-item里面，就像上面一样使用它。