material UI 网格布局设计

Question

我是 Material UI 的新手，我正在尝试利用网格概念以动态方式定位我的组件。我想按以下模式创建网格，但我一直在寻找一种解决方案来创建具有不同行数或项目数的两列网格。

下面是我尝试使用网格设计的示例布局，有人可以分享实现它的想法吗？

示例代码会更有帮助。 Screenshot of my planned design

Answer 1

要在 material UI 中获取网格格式，请遵循此 docs。您可以这样尝试，使用多个嵌套的网格容器来实现您的期望。

   <div>
      <Grid
        container
        spacing={1}
        direction="row"
        justify="flex-start"
        alignItems="flex-start"
      >
        <Grid container item xs={4} spacing={1}>
          <Grid item xs={12}>
          <Paper>Some Text </Paper>
          </Grid>
          <Grid item xs={12}>
          <Paper  style={{height:400}}>Component A</Paper>
          </Grid>
        </Grid>
        <Grid container item xs={8} spacing={1} >
        <Grid item xs={12}>
            <Paper  style={{height:200}}>Component B</Paper>
          </Grid>
          <Grid item xs={12}>
            <Paper  style={{height:200}}>Component C</Paper>
          </Grid>
        </Grid>
      </Grid>
    </div>

material UI 网格布局设计

material UI grid layout design

grid

grid-layout

reactjs

material-design

material-ui