auto-rows仅控制隐式行高度，不影响显式定义的grid-template-rows；当子元素超出显式行数时触发，需配合display: grid和正确语法使用。
auto-rows 作用范围：只影响隐式行，不改变已定义的 grid-template-rows
auto-rows 只对**超出 grid-template-rows 显式定义行数的那些行**生效。比如你写了 grid-template-rows: 100px 200px，但子元素实际需要 5 行，那第 3、4、5 行才是隐式行，才受 auto-rows 控制。
常见误解是以为它会“重置”或“覆盖”所有行高——不会。显式定义的行高优先级更高，auto-rows 完全不参与计算。
- 如果你没写
grid-template-rows，所有行都是隐式的，auto-rows就管全部 - 如果用了
grid-auto-flow: column，隐式行依然存在（只是新项优先填列），auto-rows仍生效 -
auto-rows: minmax(50px, auto)是安全写法，避免内容撑爆容器又保留最小高度
auto-rows 常见取值对比：px / fr / minmax() 的实际表现差异
不同值在内容动态变化时行为差别很大：
-
auto-rows: 80px：固定高度，内容超长会被裁剪或溢出（除非设overflow） -
auto-rows: 1fr：所有隐式行等分剩余空间——但仅当容器有明确高度且没其他约束时才可算；否则1fr在隐式行中可能退化为auto -
auto-rows: minmax(40px, max-content)：保证至少 40px 高，又能随内容自然撑开，适合文本卡片类布局 - 避免用
auto-rows: fit-content(200px)—— 浏览器支持度差（Safari 16.4+ 才稳定），且行为不如minmax()可控
为什么设置了 auto-rows 还是没效果？排查三个关键点
最常遇到的“设了没反应”，基本卡在这三处：
- 子元素没触发隐式行创建：检查是否所有元素都通过
grid-row或位置属性被严格限制在显式行内；只要有一个元素落到第n+1行（n是grid-template-rows行数），隐式行就生成了 - 父容器没设置
display: grid或grid-template-columns：auto-rows必须配合 Grid 格式化上下文，单独写它不生效 - 存在冲突的
grid-auto-rows写法：注意 CSS 属性名是grid-auto-rows，但简写grid中对应字段是auto-rows（如grid: auto-flow dense / 1fr / auto-rows: 60px是无效语法，必须分开写）
和 grid-auto-flow 搭配使用时的隐藏影响
grid-auto-flow 的值会间接决定 auto-rows 是否有机会起作用：
-
grid-auto-flow: row（默认）：新项按行顺序填，隐式行垂直堆叠 →auto-rows控制这些新增行的高度 -
grid-auto-flow: column：新项优先向右填列，但一旦列满，仍需向下新增行 → 此时auto-rows依然控制新增的那些行，不是列 -
grid-auto-flow: row dense：可能复用空缺的显式行位置，从而减少隐式行数量 →auto-rows触发机会变少
真正容易被忽略的是：即使你只关心列布局，只要网格容器高度不够、内容被迫换行，auto-rows 就会悄悄接管那些“被迫出现”的行——而不是你以为的“只用于常规流”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
