Unable to align the Divider between Grid items

user_11973720 0
Viewed 72

I want to have Divider between Grid item.

The output should be like this:-

Col 1 | Col 2 | Col 3

Though in my code I'm unable to see the Divider and also the items are aligned in vertical fashion.

import "./styles.css";
import { Grid, Divider } from "@material-ui/core";
export default function App() {
  const tempArray = ['Col 1', 'Col 2', 'Col 3'];
  return(
    <Grid container align='center' direction='column'>
      {tempArray.map((title)=>{
        return(
          <Grid container direction='row'>
            <Grid item xs>
              <strong>{title}</strong>
            </Grid>
            <Divider orientation='vertical' flexItem></Divider>
          </Grid>
        );
        }
      )}

    </Grid>
  );
}

Also, I'm not sure how I can skip the Divider for the last item.
Here's the code sandbox link.

material-ui reactjs javascript
2 Answers

The Grids inside the Grid container need to have the xs prop set to true to allow it to share the available space (docs). Otherwise it will try to occupy the whole viewport width which is the default behavior.

I'm not sure how I can skip the Divider for the last item.

You can render the Divider conditionally based on the current index:

{i !== tempArray.length - 1 && (
  <Divider orientation="vertical" flexItem></Divider>
)}

Full working code:

<Grid container align="center">
  {tempArray.map((title, i) => {
    return (
      <Grid key={title} item container xs /* <------------------ add this */>
        <Grid item xs>
          <strong>{title}</strong>
        </Grid>
        {i !== tempArray.length - 1 && (
          <Divider orientation="vertical" flexItem></Divider>
        )}
      </Grid>
    );
  })}
</Grid>

Codesandbox Demo

user_94494260

I'm able to align it horizontally.

index.js

import "./styles.css";
import { Grid, Divider } from "@material-ui/core";
export default function App() {
  const tempArray = ["Col 1", "Col 2", "Col 3"];
  return (
    <Grid container align="center" direction="column">
      <Grid container direction="row">
        {tempArray.map((title, index) => {
          return (
            <Grid item xs key={index}>
              <strong>{title}</strong>
              <Divider orientation="vertical" flexItem></Divider>
            </Grid>
          );
        })}
      </Grid>
    </Grid>
  );
}
user_113989960
Related