如何让Ant Design中的Card组件填满Grid Row的全部高度

• 核心原因：Ant Design Card 默认height为auto，不会主动占满父容器高度，即便父容器被flex/grid拉伸到对应高度，Card也不会自动填充，所以需要手动指定高度占比。
• 基础flex布局实现：
  1. 给包裹两个Card的父容器开启flex布局，flex子项默认会自动拉伸到同一高度
  2. 给两个Card组件都添加style={{height: '100%'}}属性，让Card占满已经被拉伸的父容器高度
     代码示例：

  <div style={{ display: "flex", gap: 16 }}>
    <Card style={{ height: "100%" }} title="左侧卡片">
      左侧卡片内容
      {/* 内容长度可任意，右侧卡片会自动对齐高度 */}
    </Card>
    <Card style={{ height: "100%" }} title="右侧卡片">
      右侧卡片内容
    </Card>
  </div>
  

• 栅格布局适配（使用Ant Design Row/Col时）：
  给Row添加align="stretch"属性保证Col等高，再给Card加100%高度即可：

  <Row gutter={16} align="stretch">
    <Col span={12}>
      <Card style={{ height: "100%" }} title="左侧卡片">左侧内容</Card>
    </Col>
    <Col span={12}>
      <Card style={{ height: "100%" }} title="右侧卡片">右侧内容</Card>
    </Col>
  </Row>
  

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