使用grid-auto-rows: 1fr实现等高行，配合gap控制间距，可轻松创建结构规整的网格卡片布局，结合flex布局优化内容对齐，提升视觉一致性。
在实现网格卡片布局时，等高排列是一个常见需求。使用CSS Grid配合grid-auto-rows与gap，可以轻松实现结构规整、高度一致的卡片效果。
将父容器设为display: grid，通过grid-template-columns定义列数，比如三列等宽布局：
.card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
}此时每行的高度由内容决定，可能出现高低不一的问题。
添加grid-auto-rows: 1fr，让每一行自动均分可用空间，从而实现等高效果：
立即学习“前端免费学习笔记（深入）”；
.card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 1fr; /* 所有行高度相等 */
}这样即使某个卡片内容较少，也会撑满整行高度，达到视觉上的对齐。
使用gap属性统一设置行列间距，避免传统margin带来的复杂计算：
.card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 1fr;
gap: 16px; /* 行列间距均为16px */
}也可以分别设置row-gap和column-gap进行更精细控制。
为了让内容在等高卡片中表现更好，推荐：
height: 100%使卡片占满网格单元display: flex; flex-direction: column; justify-content: space-between;
flex: 1实现自适应填充基本上就这些。用grid-auto-rows: 1fr配合gap，既能保证等高排列，又能保持间距整洁，是现代布局中非常实用的组合。不复杂但容易忽略。
以上就是CSS布局如何实现网格卡片等高排列_Grid auto-rows与gap组合的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
653
收藏
