Material-ui: using <Divider> breaks the grid

user_12762666 0
Viewed 11503

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>
  );
}
material-ui reactjs
5 Answers

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>
user_53217330

Try putting the divider inside of a grid container of its own.

<Grid item xs={2}> 
   <Divider orientation="vertical" flexItem/>
</Grid>

The material ui grid uses flexbox so dropping an item inside of it that does not have the correct properties is going to mess up the grid.

user_101984670

A good generic solution to me is adding this global style

.MuiGrid-container > .MuiDivider-vertical.MuiDivider-flexItem {
  margin-right: -1px;
}

in conjunction with adding the JSX property flexItem to the Divider:

<Grid container>
  <Grid item xs={4}>
    ...
  </Grid>
  <Divider flexItem orientation="vertical" />
  <Grid item xs={8}>
    ...
  </Grid>
</Grid>

That's a clean, transparent workaround to me which keeps the grid flowing as expected.

user_5438750

None of those solutions above were ideal for me, so I ended up simulating a Divider by showing the right side left border (you could obviously also do it by showing the left side right border), with the same CSS properties that the Divider uses. Here's a small example:

  <Grid
    container
    direction="row"
    justifyContent="space-evenly"
    alignItems="top"
  >
    <Grid
      item
      xs={6}
      style={{
        paddingRight: '10px',
      }}
      Left Side
    </Grid>
    <Grid
      item
      xs={6}
      style={{
        paddingLeft: '10px',
        borderStyle: 'solid',
        borderColor: 'rgba(0, 0, 0, 0.12)',
        borderWidth: '0 0 0 1px'
      }}
    >
      Right Side
    </Grid>
  </Grid>
user_25930630

note that you are passing 14 column in total to de grid container, at least on the sandbox. Anyway sometimes it happen with 12 columns, it work for me to pass empty breakpoints props at the last grid item, or even for all the Grid Items in your case will be:

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**>
          <Typography variant="h6" component="h2">
            third value
          </Typography>
        </Grid>
      </Grid>
    </div>
  );
}

This will say to the item to occupy all the available space. The problem is that giving the 12 columns you are stablishing the 100% of the available space, and adding a divider then you have 100% + 1px. normally without grid you'll need to set a calc(100% - 1px).

user_142846330
Related