指定 Material UI 的网格项目位置

Question

CSS 网格布局有网格列属性来指定网格项目位置（例如 grid-column: 1 / 3）

我想用 Material UI 的 Grid component 做同样的事情，但它不允许我指定某些起点和终点，只能指定数量完全采用列。

（例如

 <Grid container rowSpacing={1}>
  <Grid item xs={8}>
    Item 1
  </Grid>
  <Grid item xs={4}>
    Item 2
  </Grid>
</Grid>

例如，我希望第一个项目位于第 2 到 4 列，第二个项目位于第 7 到 10 列。我如何在 MUI v5 中做到这一点？

Answer 1

来自 Material UI 的 Grid 组件有一个误导性的名称。他们的 Grid 组件不是基于 CSS Grid，它实际上是 CSS Flexbox 添加了一些功能。所以你不能像 CSS Grid 那样使用它。您可以只使用 CSS 网格，不会有任何冲突问题。

Specify Material UI's Grid item location