grid-template-rows用于定义网格行高，支持px、%、fr、auto等单位，可结合repeat()和minmax()创建灵活布局，如头部60px、主体1fr、底部40px的三行结构。
CSS 中的 grid-template-rows 属性用于定义网格容器中每一行的高度。你可以通过多种方式精确控制每行的尺寸，适用于响应式布局和固定结构。
基本语法
grid-template-rows 接受一个或多个用空格分隔的尺寸值，每个值对应一行的高度：
grid-template-rows: 100px 50px auto;
这表示创建三行：第一行高 100px，第二行 50px，第三行自动适应内容。
常用单位和值
你可以使用不同单位来定义行高，灵活应对各种布局需求：
立即学习“前端免费学习笔记（深入）”；
绘蛙AI修图
绘蛙平台AI修图工具，支持手脚修复、商品重绘、AI扩图、AI换色
285 查看详情 像素（px）：固定高度，如 grid-template-rows: 80px 120px 百分比（%）：相对于网格容器的高度，如 grid-template-rows: 30% 70% fr 单位：弹性比例单位，分配剩余空间，如 grid-template-rows: 1fr 2fr 表示两行按 1:2 分配可用高度 auto：根据内容自动调整高度 min-content / max-content：根据最小或最大内容所需空间设置高度
结合 minmax() 和 repeat() 的高级用法
提升灵活性的方式包括使用函数组合：
grid-template-rows: repeat(3, 100px) —— 创建三行，每行 100px 高 grid-template-rows: repeat(2, minmax(100px, auto)) —— 两行，最小 100px，可随内容变高 grid-template-rows: 1fr min-content —— 第一行占剩余空间，第二行仅够容纳内容
实际示例
一个常见的三行布局（头部、主体、底部）：
.grid-container {
display: grid;
grid-template-rows: 60px 1fr 40px;
}
头部固定 60px，主体占满剩余空间，底部 40px。
基本上就这些。合理使用 grid-template-rows 能让你轻松构建清晰的纵向布局结构。
以上就是如何通过css grid-template-rows定义行高的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1076284.html
微信扫一扫 
支付宝扫一扫 
