grid-auto-rows用于设置网格布局中自动创建行的高度，适用于动态内容。其常见取值包括auto、固定值、fr、min-content、max-content及minmax()，可实现自适应或均匀分布效果。例如结合1fr使各行等分容器高度，或用minmax(60px, auto)设定最小高度且允许内容撑开。在卡片布局中，配合grid-template-columns和固定容器高，能实现每行均分且视觉整齐的效果。合理使用该属性可提升布局灵活性与响应性。
在使用 CSS Grid 布局时，grid-auto-rows 是一个非常实用的属性，它用于控制网格中自动创建的行的高度。当你没有显式定义每一行的高度（比如用
grid-template-rows），浏览器会自动创建隐式网格行，这时
grid-auto-rows就起作用了。
理解 grid-auto-rows 的作用
grid-auto-rows决定了那些“自动出现”的行的高度。这在处理动态内容或不确定数量的项目时特别有用。
例如，你有一个容器设置了列，但项目数量超过预设行数，新的行就会被自动创建，它们的高度由
grid-auto-rows控制。
常见取值包括：
立即学习“前端免费学习笔记（深入）”；
auto
：行高由内容决定（默认行为）100px
：固定高度min-content
：行高为内容最小高度max-content
：行高为内容最大所需高度1fr
：剩余空间等分（常用于自适应布局）minmax(50px, auto)
：设置最小和最大高度范围
实现均匀分配行高
如果你想让每行自动获得相同的高度，可以结合
1fr单位使用。
例如：
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 100px; /* 所有自动行高 100px */
}
或者让行高随容器伸缩：
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 1fr; /* 每行平均分配可用空间 */
height: 400px; /* 需要容器有明确高度才能体现效果 */
}
根据内容灵活调整行高
有时你希望小内容保持紧凑，大内容有足够的空间，可以用
minmax()配合
auto或
fr。
比如：
.container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: minmax(60px, auto); /* 最小60px，内容多时自动撑开 */
}
这样既能保证最小行高，又不会限制内容扩展。
实际应用场景示例
假设你在做一个卡片列表，卡片数量不固定，希望每行卡片高度一致并填满容器：
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-auto-rows: 1fr;
gap: 10px;
height: 80vh;
}
.card {
background: #f0f0f0;
padding: 20px;
}
这里
grid-auto-rows: 1fr让所有行均分垂直空间，每行内的卡片高度一致，视觉整齐。
基本上就这些。合理使用
grid-auto-rows，能让你的 Grid 布局更灵活、更可控，尤其适合动态内容场景。关键是根据容器高度和内容特性选择合适的值，比如固定值、
fr分配或
minmax()组合。不复杂但容易忽略细节。
