Is there a way to ensure consistent card height in Material-UI without setting a fixed height? I want the card heights to dynamically adjust based on content, with all cards matching the tallest one on the website. How can this be achieved while also adding space between the button and content?

The challenge you are encountering involves creating cards with varying content heights using Material-UI but requiring them to have uniform heights without specifying a fixed value. Additionally, you're looking to incorporate spacing between buttons and content.

https://i.stack.imgur.com/vcjGh.jpg

CODE SAND BOX

function ItemRow({ page_block }) {
    return page_block.map((page_block_item, index) => (
        <Grid
            justifyContent="space-between"
            alignItems="center"
            align="center"
            xs={12}
            sm={6}
            md={4}
            lg={4}
        >
            <Grid
                justifyContent="center"
                // alignItems="center"
                xs={10.5}
                sm={12}
                md={11}
                lg={12}
            >
                <Card page_block_item={page_block_item} key={index} />
            </Grid>
        </Grid>
    ));
}

const Card = ({ page_block_item: block_detail }) => {
    const [open, setOpen] = useState(false);
    const router = useRouter();
    const [cart, setCart] = useAtom(cartAtom);

    return (
        <Grid
            key={block_detail.id}
            justifyContent="center"
            display={'flex'}
            flexGrow={1}
            alignItems="stretch"
        >
            <Box
                sx={{
                    position: 'relative',
                    display: 'flex',
                    flexDirection: 'column',
                    height: '100%',
                    boxShadow: '0px 6px 12px -6px rgba(24, 39, 75, 0.12)',
                }}
                justifyContent="space-between"
                border="1px solid #E3E3E3"
                borderRadius="8px"
                overflow="hidden"
                margin={2}
                flexGrow={1}
                alignItems="stretch"
            >
                <Grid sx={{ position: 'relative' }}>
                    <Grid
                        item
                        position="relative"
                        sx={{ aspectRatio: '3/2', height: '100%' }}
                    >
                        <NextImage
                            className="image-cover"
                            media={block_detail.media}
                        />
                    </Grid>
                    <Box
                        sx={{
                            position: 'absolute',
                            right: 0,
                            bottom: 20,
                        }}
                    >
                        <ShareIcon
                            sx={{
                                background: '#FC916A',
                                marginRight: '15px',
                                padding: '5px',
                                height: '30px',
                                width: '30px',
                                borderRadius: '50%',
                                color: '#FFFFFF',
                                cursor: 'pointer',
                                '&:hover': {
                                    background: '#FFFFFF',
                                    color: '#FC916A',
                                },
                            }}
                        />
                        <BookmarkBorderIcon
                            sx={{
                                background: '#FC916A',
                                marginRight: '15px',
                                padding: '5px',
                                height: '30px',
                                width: '30px',
                                borderRadius: '50%',
                                color: '#FFFFFF',
                                cursor: 'pointer',
                                '&:hover': {
                                    background: '#FFFFFF',
                                    color: '#FC916A',
                                },
                            }}
                        />
                    </Box>
                </Grid>

                <Box
                    sx={{
                        flexGrow: 1,
                        display: 'flex',
                        flexDirection: 'column',
                        height: '100%',
                        maxHeight: 'fix-content',
                    }}
                    padding={2}
                >
                    <Grid item sx={{ textAlign: 'left' }}>
                        <StyledText
                            my={1}
                            variant="H_Regular_Tagline"
                            color="primary.main"
                            content={block_detail.info_title}
                        />
                    </Grid>
                    <Grid item sx={{ textAlign: 'left' }}>
                        <StyledText
                            my={1}
                            variant="H_Regular_Body"
                            color="secondary.dark"
                            content={block_detail.info_description}
                        />
                    </Grid>
                </Box>

                <Grid item sx={{ position: 'relative' }}>

                        <Link
                            href={`/${router.query.centerName}/post/donation/${block_detail?.slug}`}
                        >
                            <StyledButton
                                variant="H_Regular_H4"
                                sx={{ width: '90%' }}
                            >
                                {block_detail.info_action_button?.text}
                            </StyledButton>
                        </Link>
                </Grid>
            </Box>
        </Grid>
    );
};