Comment faire en sorte que cette carte ait la même hauteur en mui ? Je n'aime pas fixer une hauteur fixe. Cela devra changer de manière dynamique. Toutes les hauteurs de cartes doivent être définies sur la hauteur la plus élevée du site Web. Entre le bouton et le contenu, nous pouvons ajouter de l'espace. Comment puis-je faire cela?

Le problème auquel vous semblez être confronté est que vous souhaitez créer des cartes avec une hauteur de contenu variable à l'aide de la bibliothèque Material-UI, mais vous souhaitez que toutes les cartes aient la même hauteur sans définir de hauteur fixe. Vous souhaitez également ajouter un espace entre le bouton et le contenu.

Code Sandbox

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