如何將 material-ui Grid 組織成行？

Question

我正在使用material-ui做一個表格，使用Grid系統我想做以下事情：

<Grid container>
    <Grid item xs={4} />
    <Grid item xs={4} />
    <Grid item xs={4} />
</Grid>

並且能夠將前兩個項目放在第一行，第三個放在第二行，我發現這樣做的唯一方法是：

<Grid container>
    <Grid item xs={4} />
    <Grid item xs={4} />
</Grid>
<Grid container>
    <Grid item xs={4} />
</Grid>

將material-ui Grid堆疊成行的更好方法是什么（如Bootstrap網格中的行類概念）？

我還考慮了這些選項：

• 用空的Grid項目填充第一行？

• 放置垂直容器？

Answer 1

您已經接近第二個代碼塊了。

我發現您可以簡單地創建 2 個不同的 Grid 部分，例如：

<div>
  <Grid id="top-row" container spacing={24}>
    <Grid item xs={4}>
      <Paper className={classes.paper}>Grid cell 1, 1</Paper>
    </Grid>
    <Grid item xs={4}>
      <Paper className={classes.paper}>Grid cell 2, 1</Paper>
    </Grid>
  </Grid>
  <Grid id="bottom-row" container spacing={24}>
    <Grid item xs={4}>
      <Paper className={classes.paper}>Grid cell 1, 2</Paper>
    </Grid>
    <Grid item xs={4}>
      <Paper className={classes.paper}>Grid cell 2, 2</Paper>
    </Grid>
  </Grid>
</div>

你可以在我的沙箱里玩

查看 Grid 的官方文檔也可能有用，因為它展示了幾種使用它的方法，並且還鏈接到托管在 codeandbox.io 上的每個示例，以便您可以自己使用它。

從文檔來看，似乎擁有多層網格系統的最佳方法是定義整個網格的寬度，然后定義每個單元格的寬度，因為這會將系列中稍后的單元格推到其他行上。

Answer 2

這是您可以采用的另一種方法，它不需要兩個網格容器。 在 Material UI 中，您可以通過使用一行有 12 列的事實並利用空網格項（因為 Material UI不支持偏移網格項）將網格組織成行，例如

<Grid container spacing={24}>
    <Grid item xs={4}>
      <Paper className={classes.paper}>Grid cell 1, 1</Paper>
    </Grid>
    <Grid item xs={4}>
      <Paper className={classes.paper}>Grid cell 2, 1</Paper>
    </Grid>
    <Grid item xs={4} />
    {/* 12 Columns used, so next grid items will be the next row  */}
    {/* This works because Material UI uses Flex Box and flex-wrap by default */}
    <Grid item xs={4}>
      <Paper className={classes.paper}>Grid cell 1, 2</Paper>
    </Grid>
    <Grid item xs={8} />
  </Grid>

你可以在這里看到這個工作。

事實上，這實際上在 Material UI 網站上進行了演示（盡管沒有偏移量） here 。

我承認雖然我更喜歡在 Material UI 中看到語義行和列元素（例如在 Bootstrap 中），但這不是它的工作方式。

Answer 3

你可以做這樣的事情

<Grid container spacing={1}>
    <Grid container item xs={12} spacing={3}>
      <Grid item xs={4}>
        <Paper className={classes.paper}>item</Paper>
      </Grid>
    </Grid>
    <Grid container item xs={12} spacing={3}>
      <Grid item xs={4}>
        <Paper className={classes.paper}>item</Paper>
      </Grid>
    </Grid>
    <Grid container item xs={12} spacing={3}>
      <Grid item xs={4}>
        <Paper className={classes.paper}>item</Paper>
      </Grid>
    </Grid>
</Grid>

Answer 4

我創建了新組件來解決這個問題：

export const GridBreak = styled.div`
  width: 100%
`;

然后你的代碼看起來像這樣：

<Grid container>
    <Grid item xs={4} />
    <Grid item xs={4} />  
    <GridBreak />
    <Grid item xs={4} />
</Grid>