mui의 모든 카드를 같은 높이로 만드는 방법은 무엇입니까?
무이에서 이 카드의 높이를 동일하게 만드는 방법은 무엇인가요? 나는 고정된 높이를 설정하는 것을 좋아하지 않습니다. 이는 동적으로 변경되어야 합니다. 모든 카드 높이는 웹사이트에서 가장 높은 높이로 설정되어야 합니다. 버튼과 콘텐츠 사이에 공간을 추가할 수 있습니다. 어떻게 해야 하나요?
당신이 직면한 문제는 Material-UI 라이브러리를 사용하여 가변 콘텐츠 높이를 가진 카드를 만들고 싶지만 고정 높이를 설정하지 않고 모든 카드가 동일한 높이를 가지기를 원한다는 것입니다. 또한 버튼과 콘텐츠 사이에 공간을 추가하고 싶습니다.
코드샌드박스
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>
);
};
