0
246
ViewsUnable to align the Divider between Grid items
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.
·
Juan Pablo Isaza
2 answers
Answer question0
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>
·
Juan Pablo Isaza
Report
0
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>
);
}
·
Juan Pablo Isaza
Report
Answer question