材质UI网格布局设计

【问题标题】：material UI grid layout design材质UI网格布局设计
【发布时间】：2020-06-05 22:10:42
【问题描述】：

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

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

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

【问题讨论】：

标签： reactjs grid material-design material-ui grid-layout

【解决方案1】：

要在材质 UI 中获取 Grid 格式，请遵循此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>

【讨论】：

非常感谢@Raj Kumar。你已经给出了我真正想要的示例代码。