reactjs - 材质UI网格布局设计

Question

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

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

示例代码会更有帮助。 我的计划设计截图

Answer 1

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

   <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>