Remove additional whitespace between row items with height (React JS/Material-UI) - reactjs

Question

I am trying to create a dynamic grid system. I have an dictionary and when any of these values are set to true, the component renders:
const sideBarCategories = [
{ id: "Test", comp: Test, default: false },
{ id: "Y", comp: Y, default: true },
{ id: "X", comp: X, default: false},
{ id: "Z", comp: Z, default: false},
];
So in this case, only the Y widget will be rendered. The render function is wrapped in a grid with direction row as follows:
<Grid
container
direction="row"
alignContent="center"
alignItems="center"
wrap="wrap"
spacing={4}
>
{cardsInGrid.map((card) => {
const Component = sideBarCategories.find(
(cat) => cat.id === card.id
).comp;
return <Component key={card.id} />;
})}
</Grid>
An example of the widget can be seen here:
import React from "react";
import { makeStyles } from "#material-ui/core/styles";
import Card from "#material-ui/core/Card";
import CardActions from "#material-ui/core/CardActions";
import CardContent from "#material-ui/core/CardContent";
import Button from "#material-ui/core/Button";
import Typography from "#material-ui/core/Typography";
import Grid from "#material-ui/core/Grid";
const useStyles = makeStyles({
root: {
minWidth: 275,
},
bullet: {
display: "inline-block",
margin: "0 2px",
transform: "scale(0.8)",
},
title: {
fontSize: 14,
},
pos: {
marginBottom: 12,
},
cardDesign: {
flexGrow: 1,
marginRight: "20px",
marginLeft: "20px",
width: "100%",
},
});
function Y() {
const classes = useStyles();
const bull = <span className={classes.bullet}>•</span>;
return (
<Grid item xs={12} sm={12} md={6} lg={6} xl={6}>
<div className={classes.root}>
<Card className={classes.cardDesign}>
<CardContent>
<Typography
className={classes.title}
color="textSecondary"
gutterBottom
>
Emoji Stats
</Typography>
<Typography variant="h5" component="h2">
be{bull}nev{bull}o{bull}lent
</Typography>
<Typography className={classes.pos} color="textSecondary">
adjective
</Typography>
<Typography variant="body2" component="p">
well meaning and kindly.
<br />
{'"a benevolent smile"'}
</Typography>
</CardContent>
<CardActions>
<Button size="small">Learn More</Button>
</CardActions>
</Card>
</div>
</Grid>
);
}
export default Y;
So in the row that I have, I make it so that there's a max of 2 items per row before it goes down and creates a new row (as seen by <Grid item xs={12} sm={12} md={6} lg={6} xl={6}> in the component file above.
The problem I am having is that if any of the components' height is larger than the other item in the same row, the website will account for that by having huge white spaces on either side of the smaller component. (See image below with orange representing whitespace)
I want it so that the components are directly below each other without that extra whitespace (see image below).
Sorry for the long post but any help with this matter would be appreciated.

Answer 1

I think the way you will have to do this is make two separate Grids with the cards mapped to even and odd indexes. Make sure the grids only allow 1 card per row.
<Grid
container
direction="row"
alignContent="center"
alignItems="center"
wrap="wrap"
spacing={4}
>
{cardsInGrid.filter((i, idx) => idx % 2).map((card) => {
const Component = sideBarCategories.find(
(cat) => cat.id === card.id
).comp;
return <Component key={card.id} />;
})}
</Grid>
<Grid
container
direction="row"
alignContent="center"
alignItems="center"
wrap="wrap"
spacing={4}
>
{cardsInGrid.filter((i, idx) => !(idx % 2)).map((card) => {
const Component = sideBarCategories.find(
(cat) => cat.id === card.id
).comp;
return <Component key={card.id} />;
})}
</Grid>
I would then wrap the entire thing in a flex container, with direction set to "row":
.dictionary-container {
display: flex;
flex-direction: row;
}
Hope this helps.