grid-auto-rows用于设置网格隐式行高，结合min-content（最小内容高度）和max-content（最大内容高度）可灵活控制内容尺寸；min-content适用于紧凑布局，max-content确保内容完整展示，但可能影响布局平衡，建议根据内容特性选择并注意性能影响。
在 CSS Grid 布局中，grid-auto-rows 用于定义网格容器中自动生成的行（隐式行）的高度。当网格项超出显式定义的行时，浏览器会自动创建新行，这些行的高度由 grid-auto-rows 控制。结合 min-content 和 max-content 这两个关键字，可以更灵活地控制内容的尺寸行为。
grid-auto-rows 基本用法
grid-auto-rows 设置隐式行的大小，适用于未被显式定义的行：
.container {
display: grid;
grid-template-columns: 100px 100px;
grid-auto-rows: 50px;
}
上面代码中，只定义了两列，但如果有超过两行的项目，新增的行高将为 50px。
使用 min-content 控制行高
min-content 表示行高为内容的“最小合适高度”——即内容在不换行情况下的自然高度。适合希望行高尽可能紧凑的场景。
立即学习“前端免费学习笔记（深入）”；
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: min-content;
}
例如，一个单元格包含一段长文本，默认情况下文本会换行，而 min-content 会让该行尝试以不换行方式显示，从而决定最小所需高度。实际效果可能表现为：图片或大字词撑开高度，但空白区域压缩。
使用 max-content 控制行高
max-content 表示行高为内容“最大所需高度”——即内容完全展开、不压缩时的高度。常用于确保内容完整展示，但可能导致高度过高。
.grid {
display: grid;
grid-auto-rows: max-content;
}
比如一个格子内有很长的文字块，max-content 会让这一行变得非常高，因为它是按内容完全展开计算的。适合对布局完整性要求高的场景，但需注意可能影响整体布局平衡。
实际应用建议
在实际开发中，如何选择取决于内容特性：
- 使用
min-content可让行高更紧凑，适合缩略图、标题等希望压缩空间的内容 - 使用
max-content能保证内容完整呈现，适合复杂组件或避免裁剪的场景 - 可结合固定值或
fr单位混合使用，如grid-auto-rows: minmax(min-content, auto) - 注意性能：过度使用
max-content可能增加渲染计算量，尤其在动态内容中
基本上就这些。合理利用 grid-auto-rows 与 min-content、max-content，可以让 Grid 布局更智能地响应内容本身的需求。
