How to make all cards in mui the same height?
How to make this card have the same height in mui? I don't like setting a fixed height. This will need to change dynamically. All card heights need to be set to the highest height in the website. Between the button and the content we can add space. How do i do this?
The problem you seem to be facing is that you want to use the Material-UI library to create cards with variable content height, but you want all cards to have the same height without setting a fixed height. You also want to add space between the button and the content.
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>
);
};
