CODEWITHSUNDEEP
cssreactjsflexboxmaterial-uicss-grid
hotcakedev
hotcakedev

Reputation: 2515

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

I am going to break a line of grid item like this. enter image description here 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?

Upvotes: 13

Views: 12076

Answers (3)

Dmytro Pastukh
Dmytro Pastukh

Reputation: 193

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>

Upvotes: 15

cryss
cryss

Reputation: 4509

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>

Upvotes: 5

Anuj Thakur
Anuj Thakur

Reputation: 31

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>

Upvotes: 3

Related Questions