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

Question

I'm trying to produce the following layout using the Material-UI grid... and have only managed so far to expose just how little I understand the whole thing.

What I'm looking to create is this:

Which I think equates to this design:

So my thinking was this structure...

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

... which was nothing like it. I can't get it to show at full width to start with.

I've tried adding width={1} props to various elements to no avail. Can some one point me in the right direction, or better yet is there some dev tool I'm missing for composing 'layouts' with Material-UI grid, or something similar?

Answer 1

I managed to create your layout by starting to use the Grid references on the complex grid section of the documentation.

By combining the row and column directions as props on the innermost Grids and putting inside the child Grids outer Paper components as placeholders, we could achieve what you are looking for.

The code would look something like this:

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>
  );
}

Here is a codesandbox with a working example of the code along with some not so good styles for the paper, but to serve only as a proof of concept. Then of course you can change the margins, paddings, sizes and anything else to your needs.