指定 Material UI Grid 项目位置

Question

CSS 网格布局有 grid-column 属性来指定网格项目的位置 （例如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 Grid，不会有任何冲突的问题。