使用CSS Grid创建等高卡片布局，通过将父容器设为display: grid并定义grid-template-columns实现多列布局。2. 网格自动对齐行高，使同排卡片等高。3. 结合flex: 1和flex-direction: column确保内容区域拉伸，按钮底部对齐。4. 利用minmax()与auto-fit实现响应式自适应列数。5. 全程无需JavaScript，纯CSS完成。
使用 CSS Grid 实现等高卡片布局非常直接，关键是利用网格容器的自动行高对齐特性。只要卡片放在同一个网格行中，它们的高度会自动拉伸对齐。
1. 基本结构与 Grid 容器设置
将所有卡片放入一个父容器，并将其设为 display: grid，通过 grid-template-columns 定义列数。
标题一
内容较短。
标题二
这部分内容比较长，会撑高整个卡片，但其他卡片也会随之等高。
立即学习“前端免费学习笔记（深入）”；
标题三
中等长度内容。
Waymark
Waymark是一个视频制作工具，帮助企业快速轻松地制作高影响力的广告。
79 查看详情
2. 核心 CSS 样式
关键在于设置网格布局和对齐方式，让每个卡片自动等高。
.card-container { display: grid; grid-template-columns: repeat(3, 1fr); /* 三列等宽 */ gap: 16px; /* 卡片间距 */}
.card {border: 1px solid #ddd;padding: 16px;background: #f9f9f9;display: flex;flex-direction: column;}
3. 处理内容不对齐问题
如果希望卡片内部内容也底部对齐或均匀分布，可结合 Flexbox 增强控制。
给 .card 添加 display: flex 和 flex-direction: column若想按钮始终在底部，可将内容区域用 flex 占满：例如 header { flex: 1 }
4. 响应式适配
配合媒体查询或 minmax() 实现自适应列数。
.card-container { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));}
这样在小屏幕上自动变为单列，大屏幕多列，每张卡片依然保持等高。
基本上就这些，不需要 JavaScript，纯 CSS 就能实现整洁的等高卡片布局。
以上就是如何用css grid实现等高卡片布局的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1028454.html
微信扫一扫 
支付宝扫一扫 
