使用grid-auto-rows: 1fr实现等高行，配合gap控制间距，可轻松创建结构规整的网格卡片布局，结合flex布局优化内容对齐，提升视觉一致性。
在实现网格卡片布局时，等高排列是一个常见需求。使用CSS Grid配合grid-auto-rows与gap，可以轻松实现结构规整、高度一致的卡片效果。
基本Grid容器设置
将父容器设为display: grid，通过grid-template-columns定义列数，比如三列等宽布局：
.card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
}此时每行的高度由内容决定，可能出现高低不一的问题。
使用 grid-auto-rows 实现等高行
添加grid-auto-rows: 1fr，让每一行自动均分可用空间，从而实现等高效果：
立即学习“前端免费学习笔记（深入）”；
.card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 1fr; /* 所有行高度相等 */
}这样即使某个卡片内容较少，也会撑满整行高度，达到视觉上的对齐。
利用 gap 控制间距
使用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%使卡片占满网格单元 - 使用Flex布局垂直对齐内容：
display: flex; flex-direction: column; justify-content: space-between; - 标题或正文可设
flex: 1实现自适应填充
基本上就这些。用grid-auto-rows: 1fr配合gap，既能保证等高排列，又能保持间距整洁，是现代布局中非常实用的组合。不复杂但容易忽略。
