How to organize material-ui Grid into rows?

by

You are close with the second block of code.

I found that you could simply create 2 distinct Grid sections such as:

<div>
  <Grid id="top-row" container spacing={24}>
    <Grid item xs={4}>
      <Paper className={classes.paper}>Grid cell 1, 1</Paper>
    </Grid>
    <Grid item xs={4}>
      <Paper className={classes.paper}>Grid cell 2, 1</Paper>
    </Grid>
  </Grid>
  <Grid id="bottom-row" container spacing={24}>
    <Grid item xs={4}>
      <Paper className={classes.paper}>Grid cell 1, 2</Paper>
    </Grid>
    <Grid item xs={4}>
      <Paper className={classes.paper}>Grid cell 2, 2</Paper>
    </Grid>
  </Grid>
</div>

You can play with it in my sandbox

It might also be work checking out the official documentation for Grid, as it shows a few ways to use it and also links to each exapmle hosted on codesandbox.io so you can play with it yourself.

From the docs, it seems the best way to have multi-layered grid systems is to define the width of the overall grid and then to define the width of each cell, as this will push cells later in the series onto the other rows.

Leave a Comment

tech