grid-auto-rows设置隐式行高使卡片等高，gap统一行列间距；结合auto-fit和minmax实现响应式自适应布局，无需手动处理外边距与高度，提升卡片网格的整洁性与灵活性。
使用 CSS Grid 制作卡片布局时，grid-auto-rows 与 grid-gap 是两个非常实用的属性。它们能帮助你快速构建整齐、响应式且间距统一的卡片网格，无需对每个项目单独设置高度或外边距。
grid-auto-rows：控制隐式行高
当你没有显式定义网格行（比如用 grid-template-rows），浏览器会自动创建“隐式网格行”来容纳超出初始布局的项目。grid-auto-rows 就是用来设置这些隐式行的高度。
在卡片布局中，通常希望每张卡片占据相同高度的行，这时可以这样设置：
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-auto-rows: 1fr; /* 所有行等高，自动填充 */
}
这里使用 1fr 让每一行平均分配可用空间，卡片高度一致，视觉更整齐。
立即学习“前端免费学习笔记（深入）”；
grid-gap：统一卡片间距
grid-gap（现在标准写法是 gap）用于设置网格项目之间的行间距和列间距，替代了传统使用 margin 带来的计算复杂问题。
结合上面的布局：
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-auto-rows: minmax(150px, auto); /* 最小高度150px，内容可撑高 */
gap: 16px; /* 行与列的间距都是16px */
}
gap 让卡片之间保持一致留白，不会出现边缘多出空白或需要特殊清除首尾项 margin 的情况。
实际卡片结构示例
假设你的 HTML 结构如下：
卡片1
内容描述...
卡片2
内容描述...
卡片3
内容描述...
CSS 设置：
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
grid-auto-rows: minmax(120px, auto);
gap: 12px;
padding: 16px;
}
.card {
background: #f4f4f4;
border-radius: 8px;
padding: 16px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
这个组合让布局自动适应容器宽度，卡片数量变化时依然美观，同时保持良好的可读性和响应性。
基本上就这些，grid-auto-rows 控制行高逻辑，gap 管理间距，两者配合能让卡片布局简洁又灵活。不复杂但容易忽略。
