grid-template-rows 配合 auto 可实现自适应行高布局。1. 用于头部固定、内容自适应、底部固定的常见页面结构；2. 多个 auto 区域结合固定值或 gap 实现灵活间距；3. auto 与 fr 混合使用，使内容行按需占用、剩余空间合理分配。注意容器高度设置及溢出控制，避免全用 auto 导致布局失控。
CSS 的 grid-template-rows 配合 auto 可以灵活控制网格容器中行的高度，尤其适合内容高度不确定或需要自适应的布局场景。理解它们如何协作，能帮助你构建更自然、响应式的页面结构。
基本概念：grid-template-rows 与 auto
grid-template-rows 定义网格容器中每一行的高度。你可以为每行指定具体值（如 px、fr、%），也可以使用 auto 让行高根据内容自动调整。
auto 表示该行高度由内容决定，内容多就高，内容少就矮。例如：
.container {
display: grid;
grid-template-rows: auto 100px auto;
}
这表示：第一行高度随内容变化，第二行固定 100px，第三行也随内容自适应。
立即学习“前端免费学习笔记（深入）”；
常见实用布局模式
以下是几种典型用法，结合 auto 实现常见页面结构。
1. 头部固定 + 内容自适应 + 底部固定
适用于大多数网页布局，比如 header 固定高度，footer 也固定，中间内容区域自动撑开。
.layout {
display: grid;
grid-template-rows: 60px auto 40px; /* header | main | footer */
height: 100vh;
}
此时中间行（auto）会填满剩余空间。如果内容很少，它不会塌陷；内容多时可滚动（配合 overflow）。
2. 多个自适应区域 + 固定间隔
当多个区块内容不固定，但希望保留一定比例或留白：
.card-layout {
display: grid;
grid-template-rows: auto 20px auto; /* 上区块、间距、下区块 */
gap: 20px; /* 推荐用 gap 而非空行控制间距 */
}
注意：如果用了 gap，就不需要额外用一行做间距，上面例子只是为了演示 auto 如何与其他值混合使用。3. auto 与 fr 单位混合使用
fr 表示可用空间的份数，和 auto 搭配可以实现“内容占需，剩余平分”的效果。
.mixed {
display: grid;
grid-template-rows: auto 1fr auto;
height: 100vh;
}
第一行和第三行按内容高度，中间行占据所有剩余空间。非常适合“顶部导航 + 主内容区 + 状态栏”这类应用界面。
注意事项与技巧
使用 auto 时，有几个关键点要留意：
- auto 行不会压缩内容，如果内容太多，可能溢出容器，建议配合
overflow: auto控制。 - 在设置了固定容器高度（如 100vh）时，auto 才能和其他单位（如 fr）合理分配空间。
- 避免全部使用 auto，那样无法控制整体高度分布；合理搭配 fr 或固定值更可控。
- 浏览器会先计算 auto 行的实际内容高度，再把剩余空间分配给 fr 行。
基本上就这些。掌握 grid-template-rows 和 auto 的配合，能让你用最少代码实现结构清晰的二维布局。不复杂但容易忽略细节。
