如何在React中排列MUI卡片以填充可用空间？

当前基于MUI Grid组件实现布局，现有效果为中等及以上屏幕（md断点）下两个卡片左右分列，但卡片高度不一致；期望实现两个卡片在分列时高度完全对齐的效果。

当前代码：

<Grid container spacing={2}>
     <Grid item xs={12} md={6}>
         <Box className="white-card">
             ....content...
         </Box>
     </Grid>
     <Grid item xs={12} md={6}>
         <Box className="white-card">
             ....content...
         </Box>
     </Grid>
</Grid>

要实现等高卡片，可通过以下两种方式实现：

方式一：利用MUI Grid内置属性 #

给外层Grid container显式设置alignItems="stretch"（该值为默认值，若未被覆盖可省略），同时给内部Box设置高度为100%，让卡片填满父容器高度：

<Grid container spacing={2} alignItems="stretch">
     <Grid item xs={12} md={6}>
         <Box className="white-card" sx={{ height: '100%' }}>
             ....content...
         </Box>
     </Grid>
     <Grid item xs={12} md={6}>
         <Box className="white-card" sx={{ height: '100%' }}>
             ....content...
         </Box>
     </Grid>
</Grid>

原理：alignItems="stretch"会使所有Grid item拉伸至容器内最高项的高度，Box设置height: '100%'后，卡片内容区域会填满整个item的高度。

方式二：自定义CSS样式 #

给white-card类添加Flexbox相关样式，让卡片自身具备拉伸能力：

.white-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

此方式下，同样需要确保外层Grid container的alignItems为stretch（默认生效），卡片会自动填充高度，若需要让内部某部分内容自动拉伸占满剩余空间，还可给对应元素添加flex-grow: 1。

内容的提问来源于stack exchange，提问作者bernat97