使用CSS Grid实现等高卡片布局的核心是利用网格容器的自动行高对齐特性，通过纯CSS无需JavaScript即可完成。以下是具体实现步骤和代码示例：
一、基础HTML结构<div class="card-container"> <div class="card"> <h3>标题一</h3> <p>内容较短</p> <button>立即学习</button> </div> <div class="card"> <h3>标题二</h3> <p>这部分内容比较长，会撑高整个卡片，但其他卡片也会随之等高</p> <button>立即学习</button> </div> <div class="card"> <h3>标题三</h3> <p>中等长度内容</p> <button>立即学习</button> </div></div>二、核心CSS实现- 设置网格容器
使用display: grid启用网格布局
通过grid-template-columns定义列数（示例为3列等宽）
添加gap控制卡片间距
.card-container { display: grid; grid-template-columns: repeat(3, 1fr); /* 三列等宽 */ gap: 16px; /* 卡片间距 */}- 卡片基础样式
添加边框、背景色等视觉样式
关键：设置display: flex和flex-direction: column使内容垂直排列
.card { border: 1px solid #ddd; padding: 16px; background: #f9f9f9; display: flex; flex-direction: column;}- 内容对齐控制
按钮底部对齐：通过flex: 1让内容区域自动填充剩余空间
.card p { flex: 1; /* 内容区域拉伸 */}.card button { margin-top: auto; /* 按钮始终位于底部 */}三、响应式适配方案- 使用minmax()+auto-fit实现自适应列数
当屏幕宽度小于250px时自动变为单列
大屏幕时根据容器宽度自动填充列数
.card-container { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));}- 媒体查询方案（备选）
/* 小屏幕（≤768px）单列 */@media (max-width: 768px) { .card-container { grid-template-columns: 1fr; }}四、完整代码示例<style> .card-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; } .card { border: 1px solid #ddd; padding: 16px; background: #f9f9f9; display: flex; flex-direction: column; } .card p { flex: 1; } .card button { margin-top: auto; align-self: flex-start; /* 左对齐按钮 */ }</style><div class="card-container"> <!-- 卡片内容同上 --></div>五、关键特性说明- 自动等高机制：同一网格行中的所有网格项（卡片）会自动拉伸至行内最高项的高度
- Flexbox增强控制：通过flex-direction: column和flex: 1实现内容区域拉伸和按钮底部对齐
- 响应式原理：minmax(250px, 1fr)表示每列最小宽度250px，最大宽度均分剩余空间
- 浏览器兼容性：支持所有现代浏览器（IE11部分支持需前缀）
六、扩展优化建议- 添加悬停效果：
.card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); transition: all 0.3s ease;}- 内容溢出处理：
.card p { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; /* 限制3行 */ -webkit-box-orient: vertical;}- 网格对齐微调：
.card-container { align-items: stretch; /* 默认值，确保等高 */ /* align-items: start; 可取消等高效果 */}通过以上方法，可以高效实现完全等高、响应式、内容对齐的卡片布局，且代码简洁易于维护。
