如何用css grid-template-rows与auto配合布局

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 让行高根据内容自动调整。

例如：

.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）。

Spacely AI

为您的房间提供AI室内设计解决方案，寻找无限的创意

67

查看详情

2. 多个自适应区域 + 固定间隔

当多个区块内容不固定，但希望保留一定比例或留白：

.card-layout {
  display: grid;
  grid-template-rows: auto 20px auto; /* 上区块、间距、下区块 */
  gap: 20px; /* 推荐用 gap 而非空行控制间距 */
}

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 的配合，能让你用最少代码实现结构清晰的二维布局。不复杂但容易忽略细节。

以上就是如何用css grid-template-rows与auto配合布局的详细内容，更多请关注php中文网其它相关文章！