grid-auto-rows用于设置网格容器中隐式创建行的高度，当未用grid-template-rows明确定义时生效。其值可为固定值如100px、弹性单位1fr、min-content、max-content或minmax()函数。例如grid-auto-rows: minmax(60px, auto)使每行至少60px高且内容增多时自动扩展，适用于项目数量不确定的动态布局场景。与grid-template-rows不同，后者定义显式网格行高，而grid-auto-rows控制自动生成长行列的高度，提升布局灵活性。
在 CSS Grid 布局中，grid-auto-rows 用于设置网格容器中自动生成的行（隐式创建的行）的高度。当你没有明确使用 grid-template-rows 定义每一行高度时，浏览器会自动创建行，这些行的高度由 grid-auto-rows 控制。
基本语法
grid-auto-rows: track-size;
其中 track-size 可以是长度值（如 px、em、fr）、百分比，或关键字（如 auto、min-content、max-content）。
常用取值示例
以下是一些常见的使用方式：
固定高度：所有自动生成的行统一为固定高度。grid-auto-rows: 100px; 弹性单位（fr）：按比例分配剩余空间。grid-auto-rows: 1fr;
如果有多个 1fr 行，它们将平均分配可用空间。 最小内容高度：行高根据内容最小所需空间调整。grid-auto-rows: min-content; 最大内容高度：行高适应内容的最大需求（比如长单词或图片）。grid-auto-rows: max-content; 混合使用 minmax()：推荐方式，可设定最小和最大范围。grid-auto-rows: minmax(80px, auto);
表示每行至少 80px 高，内容更多时自动撑开。
实际应用场景
假设你有一个网格容器，里面项目数量不确定，希望每行自动具有合理高度：
立即学习“前端免费学习笔记（深入）”；
稿定抠图
AI自动消除图片背景
76 查看详情
.container { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(60px, auto); gap: 10px;}
这样，即使没有定义具体有多少行，每个新增的行都会至少有 60px 高，内容超出时自动增高。
与 grid-template-rows 的区别
grid-template-rows 用于明确定义已知行的高度，适用于固定结构；而 grid-auto-rows 管理的是当项目超出预定义行数时，浏览器自动创建的“隐式”行的高度。
基本上就这些。掌握 grid-auto-rows 能让你的网格布局更灵活，尤其适合动态内容场景。
以上就是在css中如何用grid-auto-rows设置自动行高的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1036900.html
微信扫一扫 
支付宝扫一扫 
