What is the best way for custom spacing between rows in material-ui grid?

Question

what is the best way to have a spacing between certain rows within a grid in material-ui?

For example, given the following grid with spacing={0} .

GridContainer
row1    GridItem GridItem
row2    GridItem GridItem
row3    GridItem GridItem
row4    GridItem GridItem

The goal is to have the same grid with spacing of 0, but with custom spacing between rows 2 and 3

GridContainer
row1    GridItem GridItem
row2    GridItem GridItem

row3    GridItem GridItem
row4    GridItem GridItem

I tried to put mt={2) to GridItems in the 3rd row but it did not work. I achieved the behaviour with a custom class passed via the className attribute, though I am not sure if this is the best way to go.

Cheers

Answer 1

<Grid container layout={"row"} spacing={10} >
   <Grid item xs={12} md={3}>
      <div style={{height: "100%", paddingTop: 5}}>add your component here</div>
   </Grid>
</Grid>