grid-template-rows定义显式行高，grid-auto-rows控制隐式生成行的行高；前者用于精确设置已知行，后者处理超出部分的自动创建行，两者结合可实现首行特殊、后续统一的布局效果，如仪表盘标题与卡片排列，配合minmax()更灵活。
在 CSS Grid 布局中，grid-template-rows 和 grid-auto-rows 都用于控制网格行的高度，但它们作用的范围不同。理解它们如何配合使用，有助于更灵活地构建复杂的网格布局。
grid-template-rows：定义明确的行
这个属性用来显式定义网格容器中指定行的数量和尺寸。它适用于你提前知道有多少行，并希望精确控制这些行的高度。
例如：
.grid-container {
grid-template-rows: 100px 50px;
}
这会创建两行，第一行高 100px，第二行高 50px。如果网格项只放在这两行内，那就够了。
立即学习“前端免费学习笔记（深入）”；
grid-auto-rows：处理自动生成的行
当你放置的网格项超出了 grid-template-rows 定义的行数时，浏览器会自动创建额外的行，这些被称为“隐式网格行”。grid-auto-rows 就是用来设置这些自动生成行的高度。
比如：
.grid-container {
grid-template-rows: 100px;
grid-auto-rows: 60px;
}
第一行是 100px（由 template 控制），之后所有自动生成的行都是 60px 高。
Reclaim.ai
为优先事项创建完美的时间表
90 查看详情 
两者如何配合使用
实际开发中，你可以结合两者实现前几行特殊布局，后续行统一规格的效果。
常见场景举例：
一个仪表盘，第一行是横跨全宽的标题区域（固定高度）后面的内容卡片自动排列，每张卡片高度一致
CSS 示例：
.dashboard {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 80px; /* 第一行是标题 */
grid-auto-rows: 100px; /* 后续行自动创建，统一高度 */
}
.item-header { grid-row: 1; }
.card:nth-child(n+2) { grid-row: auto; }
这样，第1个元素占第一行 80px，其余元素自动分配到新生成的 100px 高的行中。
小技巧：使用 minmax() 更灵活
你可以用 minmax() 让自动行更智能：
grid-auto-rows: minmax(100px, auto);
表示自动生成的行最小 100px，内容更高时自动撑开。
基本上就这些。掌握 grid-template-rows 控制定义行、grid-auto-rows 控制多余行的原则，就能轻松应对大多数动态网格场景。不复杂但容易忽略细节。
以上就是在css中grid-template-rows与grid-auto-rows配合的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/995370.html
微信扫一扫 
支付宝扫一扫 
