How to add a new row for grid item in material ui?

Question

I am going to break a line of grid item like this. As you can see the image, rest space of grid should be empty.

<Grid container spacing={3}
  <Grid item xs={12}>
    "Grid Item xs={12}"
  </Grid>
  <Grid item xs={4}>
    "Grid Item xs={4}"
  </Grid>
  // empty space
  <Grid item xs={12}>
    "Grid Item xs={12}"
  </Grid>
</Grid>

Should I use inner grid container? Or should I use display flex?

Longitude

Answer 1

I created new component to solve this problem:

export const GridBreak = styled.div`
  width: 100%
`;

Then your code would look like:

<Grid container spacing={3}>
  <Grid item xs={12}>
    "Grid Item xs={12}"
  </Grid>
  <Grid item xs={4}>
    "Grid Item xs={4}"
  </Grid>
  <GridBreak />
  <Grid item xs={12}>
    "Grid Item xs={12}"
  </Grid>
</Grid>

Telegram

I am not sure this is the best way to solve my problem, but it seems a good choice. so check. – Longitude

Answer 2

I would add <Box width="100%"/>:

    <Grid container spacing={3}
      <Grid item xs={12}>
        "Grid Item xs={12}"
      </Grid>
      <Grid item xs={4}>
        "Grid Item xs={4}"
      </Grid>

      <Box width="100%"/> // empty space

      <Grid item xs={12}>
        "Grid Item xs={12}"
      </Grid>
    </Grid>

Barthold

Answer 3

You can just add the empty grid of xs of 8. like this:

<Grid container spacing={3}
  <Grid item xs={12}>
   "Grid Item xs={12}"
  </Grid>
 <Grid item xs={4}>
  "Grid Item xs={4}"
 </Grid>
 <Grid item xs={8}>
  // empty 
 </Grid>
 <Grid item xs={12}>
  "Grid Item xs={12}"
 </Grid>

Machute

Of course, I know it works. What about case of md or another responsive size? Should I use Hidden component as well? Not that! – Longitude