Material-ui: using <Divider> breaks the grid

Question

so I have this annoying issue I can't find a result for. I'm new to material-ui and it feels like I'm missing something here...

I just want a divider between the grid items, without it breaking the order of the grid. What am I missing?

Sandbox: https://vpbyd.csb.app/

import React from "react";
import "./styles.css";
import {Grid, Typography, Divider} from '@material-ui/core'

export default function App() {
  return (
    <div className="App">
       <Grid container spacing={3}>

<Grid item xs={4}> 
<Typography variant="h5" component="h2">
One
</Typography>
</Grid>
<Grid item xs={4}> 
<Typography variant="h5" component="h2">
  Two
  </Typography>
</Grid>
<Grid item xs={4}> 
<Typography variant="h5" component="h2">
  Three
  </Typography>
</Grid>

</Grid>

<Grid container spacing={0} alignItems="center">

<Grid item xs={4}> 
<Typography variant="h6" component="h2">
first value
</Typography>
</Grid>
<Divider orientation="vertical" flexItem/>
<Grid item xs={4}> 
<Typography variant="h6" component="h2">
second value
</Typography>
</Grid>
<Divider orientation="vertical" flexItem/>
<Grid item xs={4}> 
<Typography variant="h6" component="h2">
third value
</Typography>
</Grid>

</Grid>
    </div>
  );
}

Answer 1

I had the same issue and found a trick : add a negative right margin to your Divider

<Grid item xs={4}> 
    <Typography variant="h6" component="h2">
        first value
    </Typography>
</Grid>
<Divider orientation="vertical" flexItem sx={{ mr: "-1px" }} />
<Grid item xs={4}> 
    <Typography variant="h6" component="h2">
        second value
    </Typography>
</Grid>