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

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>
    );
}

question from:https://stackoverflow.com/questions/65862709/create-a-grid-with-variable-card-heights-using-material-ui-react

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.