材料UI网格布局设计

Question

我对Material UI完全陌生，我试图利用Grid概念以非常动态的方式定位我的组件。我想按以下模式创建网格，但我一直在寻找解决方案以创建具有不同行数或项目数的两列网格。

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

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

Answer 1

要在材料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>