Comment faire en sorte que toutes les cartes du mui aient la même hauteur ?
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>
);
};
