如何让多行Tailwind卡片保持相同高度？

核心方案 #

在Tailwind中实现网格卡片等高，只需针对卡片容器和内部结构做两处关键调整：

1. 给卡片外层容器添加 h-full 类，强制卡片填充所在网格单元格的高度（网格单元格高度由该行最高卡片决定，所有卡片会自动匹配这个高度）
2. 若卡片底部有需要对齐的元素（如按钮），给卡片内部内容容器添加 flex flex-col justify-between，让内容自动上下分布，底部元素固定在卡片底部

修改后的代码示例 #

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <!-- 卡片1 -->
  <div class="bg-white rounded-lg shadow p-4 h-full">
    <div class="flex flex-col justify-between h-full">
      <h3 class="text-lg font-semibold mb-2">服务器扩容请求</h3>
      <p class="text-gray-600 mb-4">需要将现有云服务器CPU从2核升级至4核，内存从8GB升级至16GB，预计下周三前完成，用于支撑新上线的用户数据分析模块。</p>
      <button class="bg-blue-500 text-white px-4 py-2 rounded">处理请求</button>
    </div>
  </div>
  <!-- 卡片2 -->
  <div class="bg-white rounded-lg shadow p-4 h-full">
    <div class="flex flex-col justify-between h-full">
      <h3 class="text-lg font-semibold mb-2">密码重置申请</h3>
      <p class="text-gray-600 mb-4">用户张三无法登录后台管理系统，申请重置账号密码，已核实用户身份信息。</p>
      <button class="bg-blue-500 text-white px-4 py-2 rounded">处理请求</button>
    </div>
  </div>
  <!-- 更多卡片... -->
</div>

原理说明 #

• h-full：让卡片继承网格项的高度，而网格项的高度由该行内容最多的卡片决定，从而实现所有卡片高度统一
• flex flex-col justify-between：将卡片内部转为垂直弹性布局，自动分配内容空间，确保底部操作按钮始终对齐到卡片底部，提升视觉一致性

额外优化提示 #

• 若卡片包含图片，给图片容器添加 object-cover 和固定高度（如 h-48），避免图片尺寸差异干扰卡片高度
• 统一卡片内文本的换行规则（如标题限制行数、描述文本自动换行），减少内容差异带来的视觉不协调

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