Create a grid with variable card heights using material-ui react - reactjs

Question

I am trying to create a grid similar to this website by using Material-UI. However when the height of one card changes every card height changes. I tried to use direction="row" and direction="column" but it doesn't seem to work. I was wondering if there a way to change the height of the image inside depending on the size of the image while having a grid like the website above.
All I can see at the moment is this:
Here is my code for the card:
import React from 'react';
import Card from '#material-ui/core/Card';
import CardHeader from '#material-ui/core/CardHeader';
import CardMedia from '#material-ui/core/CardMedia';
import CardContent from '#material-ui/core/CardContent';
import CardActions from '#material-ui/core/CardActions';
import Avatar from '#material-ui/core/Avatar';
import IconButton from '#material-ui/core/IconButton';
// import Typography from '#material-ui/core/Typography';
import FavoriteIcon from '#material-ui/icons/Favorite';
import ShareIcon from '#material-ui/icons/Share';
import MoreVertIcon from '#material-ui/icons/MoreVert';
import { useStyles } from '../style/card.styles';
export default function Cards({ profile, sourceImage }) {
const classes = useStyles();
return (
<Card className={classes.root} style={{ height: '100%' }}>
<CardHeader
avatar={
<Avatar aria-label="recipe" src={profile} className={classes.avatar}>
</Avatar>
}
action={
<IconButton aria-label="settings">
<MoreVertIcon />
</IconButton>
}
title="Shrimp and Chorizo Paella"
subheader="September 14, 2016"
/>
<CardContent>
<CardMedia
className={classes.media}
image={sourceImage}
title="Paella dish"
/>
{/* <img src={sourceImage} style={{ maxHeight: '20rem' }} /> */}
</CardContent>
<CardActions disableSpacing>
<IconButton aria-label="add to favorites">
<FavoriteIcon />
</IconButton>
<IconButton aria-label="share">
<ShareIcon />
</IconButton>
</CardActions>
</Card>
);
}
And the layout page:
import React from 'react';
import { makeStyles } from '#material-ui/core/styles';
import Grid from '#material-ui/core/Grid';
import Cards from './Card';
import vertical from '../images/v1.jfif';
import horizontal from '../images/h1.png';
import '../style/card.css';
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
},
paper: {
height: 140,
width: 100,
},
control: {
padding: theme.spacing(2),
}
}));
export default function HomePage() {
const imagess = [vertical, horizontal, vertical, horizontal]
const classes = useStyles();
return (
<Grid container justify="center" className={classes.root} spacing={2}>
<Grid item xs={12}>
<Grid container alignItems="flex-start" justify="center" spacing={1}>
{imagess.map((image, index) => (
<Grid key={index} item>
<Cards profile={""} sourceImage={image} />
</Grid>
))}
</Grid>
<Grid container alignItems="flex-start" justify="center" spacing={1}>
{imagess.map((image, index) => (
<Grid key={index} item>
<Cards profile={""} sourceImage={image} />
</Grid>
))}
</Grid>
</Grid>
</Grid>
);
}

Answer 1

I think what you are looking for is a masonry grid. It's worth a google search.
What these packages do is calculate positions within a container on page load and resize. One example for react could be react-responsive-masonry
Example usage with react-responsive-masonry
import React from "react"
import Masonry, {ResponsiveMasonry} from "react-responsive-masonry"
// The number of columns change by resizing the window
class MyWrapper extends React.Component {
render() {
return (
<ResponsiveMasonry
columnsCountBreakPoints={{350: 1, 750: 2, 900: 3}}
>
<Masonry>
<ChildA />
<ChildB />
{/* Children */}
<ChildY />
<ChildZ />
</Masonry>
</ResponsiveMasonry>
)
}
}
// The number of columns don't change by resizing the window
class MyWrapper extends Component {
render() {
return (
<Masonry columnsCount={3}>
<ChildA />
<ChildB />
{/* Children */}
<ChildY />
<ChildZ />
</Masonry>
)
}
}
In case of the material ui you would basically replace the Grid and only render cards inside the Masonry.