如何使用 Material-UI 网格创建此 'layout'？

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} 道具，但没有成功。有人能给我指出正确的方向吗，或者更好的是，我是否缺少一些开发工具来将 'layouts' 与 Material-UI 网格或类似的东西组合在一起？

Answer 1

我通过开始使用文档 complex grid section 中的网格引用成功地创建了您的布局。

通过组合 row 和 column 方向作为最内层网格的道具，并将子网格外部纸组件放入内部作为占位符，我们可以实现您正在寻找的东西。

代码看起来像这样：

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，其中包含代码的工作示例以及一些不太适合本文的样式，但仅用作概念验证。当然，您可以根据需要更改边距、填充、大小和其他任何内容。

如何使用 Material-UI 网格创建此 'layout'？

How do I create this 'layout' with Material-UI Grid?

grid-layout

material-ui