如何使用 Material-UI Grid 创建这个“布局”？

Question

我正在尝试使用 Material-UI 网格生成以下布局...到目前为止，我只设法暴露我对整个事物的了解程度。

我想要创建的是这样的：

我认为等同于这种设计：

所以我的想法是这个结构......

<Grid container xs={12} spacing={3}>

  <Grid item xs={12} >
    <Paper className={classes.paper}>
      Top Bar
    </Paper>
  </Grid>

  <Grid container xs={12} spacing={3}>    
      <Grid container spacing={3}>
        <Paper className={classes.paper}>

          <Grid item xs={4}>
            Main Field
          </Grid>

          <Grid container xs={8}>
            <Grid container item xs={8}>
              <Grid item xs={4}>
                field 1 row 1
              </Grid>
              <Grid item xs={4}>
                field 2 row 1
              </Grid>
            </Grid>
            <Grid container item xs={8}>
              <Grid item xs={4}>
                field 1 row 2
              </Grid>
              <Grid item xs={4}>
                field 2 row 2
              </Grid>
            </Grid>
            <Grid container item xs={8}>
              <Grid item xs={4}>
                field 1 row 3
              </Grid>
              <Grid item xs={4}>
                field 2 row 3
              </Grid>
            </Grid>
          </Grid>
        </Paper>
      </Grid>
    </Grid>
  </Grid>

</Grid>

... 这一点都不像。我无法让它以全宽开始显示。

我尝试将width={1} 道具添加到各种元素，但无济于事。有人能指出我正确的方向吗，或者更好的是，我是否缺少一些开发工具来使用 Material-UI 网格或类似的东西组合“布局”？

Answer 1

我设法通过开始使用文档complex grid section 上的网格引用来创建您的布局。

通过将 row 和 column 方向组合为最内层 Grids 上的道具，并将子 Grids 外部 Paper 组件作为占位符放入子网格内，我们可以实现您想要的。

代码如下所示：

export default function ComplexGrid() {
  return (
    <div>
      <Paper>
        <Grid container spacing={3}>
          <Grid item xs={12}>
            <Paper>xs=12</Paper>
          </Grid>
          <Grid item xs={12} container>
            <Grid item xs container direction="column" spacing={3}>
              <Grid item xs={4}>
                <Paper>xs=4</Paper>
              </Grid>
              <Grid item xs={8}>
                <Paper>
                  <Grid item xs container direction="column" spacing={2}>
                    <Grid item xs={12}>
                      <Paper>
                        <Grid item xs container direction="row" spacing={1}>
                          <Grid item xs={6}>
                            <Paper>xs=4</Paper>
                          </Grid>
                          <Grid item xs={6}>
                            <Paper>xs=4</Paper>
                          </Grid>
                        </Grid>
                      </Paper>
                    </Grid>
                    <Grid item xs={12}>
                      <Paper>
                        <Grid item xs container direction="row" spacing={1}>
                          <Grid item xs={6}>
                            <Paper>xs=4</Paper>
                          </Grid>
                          <Grid item xs={6}>
                            <Paper>xs=4</Paper>
                          </Grid>
                        </Grid>
                      </Paper>
                    </Grid>
                    <Grid item xs={12}>
                      <Paper>
                        <Grid item xs container direction="row" spacing={1}>
                          <Grid item xs={6}>
                            <Paper>xs=4</Paper>
                          </Grid>
                          <Grid item xs={6}>
                            <Paper>xs=4</Paper>
                          </Grid>
                        </Grid>
                      </Paper>
                    </Grid>
                  </Grid>
                </Paper>
              </Grid>
            </Grid>
          </Grid>
        </Grid>
      </Paper>
    </div>
  );
}

这里是codesandbox，其中包含代码的工作示例以及一些不太适合论文的样式，但仅用作概念证明。然后，您当然可以根据需要更改边距、填充、大小和其他任何内容。