grid-auto-rows仅定义自动创建的网格行轨道尺寸，不响应内容高度变化；它影响整行所有单元格，无法让每个单元格独立适应内容，正确做法是结合align-items或min-content等属性。
grid-auto-rows 的值不会动态计算行高
它只是定义「自动创建的网格行轨道」的尺寸，不是行内文本的 line-height，也不响应内容高度变化。很多人误以为设成 minmax(1em, auto) 就能让每行根据文字自动撑开——实际不会，grid-auto-rows 只管轨道（track）尺寸，不管单元格（cell）里内容怎么溢出或换行。
常见错误现象：grid-auto-rows: auto 下，文字多的单元格撑开了整行，但相邻列同属该行的其他单元格也被拉高，导致视觉错位；或者设成固定值如 2rem，内容少时留白，内容多时文字被裁切。
-
auto表示“由该行中最高单元格决定”，不是“按内容逐个算” -
minmax(min, max)中的max为auto时，等价于minmax(min, max-content)，仍受该行所有单元格影响 - 想让每个单元格独立适应内容？得靠
align-items: start或单元格内height: min-content配合，而不是指望grid-auto-rows
什么时候该用 grid-auto-rows，什么时候不该用
适用场景：你明确知道新增行大概需要多高，比如卡片列表、表单字段组、固定规格的图标+标题组合。不适用场景：表格类布局、富文本混排、用户可编辑的多行输入框容器。
典型反例：用 display: grid 做评论流，每条评论高度不同，还带展开/收起。此时设 grid-auto-rows: auto 会让一条长评论把整行拉高，底下所有同列回复都跟着变高，破坏阅读节奏。
立即学习“前端免费学习笔记（深入）”；
- 适合：
grid-auto-rows: 80px（头像+昵称固定高） - 适合：
grid-auto-rows: minmax(40px, max-content)（按钮组，最小保证点击区，最大不超容器） - 不适合：
grid-auto-rows: fit-content(100%)（这不会按子元素内容自适应，而是按网格容器可用空间算） - 更稳的替代：改用
grid-template-rows: repeat(auto-fit, minmax(40px, max-content)))，配合grid-auto-flow: row
和 line-height、min-height 混用时的冲突点
grid-auto-rows 和文本行高是两套系统：前者控制轨道，后者控制行框（line box）。当单元格内文字换行多、line-height 大，但 grid-auto-rows 设得太小，就会出现文字溢出或遮挡。
错误调试路径常是：调大 line-height → 发现文字还是被截 → 又去调 grid-auto-rows → 结果整行变高影响其他列 → 最后放弃 Grid 改 Flex。
- 若单元格有
padding，记得把它算进轨道高度预估里，grid-auto-rows不包含 padding -
min-height在单元格上生效，但不会触发grid-auto-rows重算；它只会影响该单元格在轨道内的对齐位置（比如align-self: start下往上贴） - 真正要防溢出：给单元格加
overflow: hidden或word-break: break-word，别依赖轨道“刚好包住”
浏览器兼容性里最易忽略的细节
grid-auto-rows 在所有支持 CSS Grid 的浏览器里行为一致，但 minmax() 里的 auto 值在 Safari 15.4 之前不支持，会退化成 0px，导致行消失。这不是 bug，是规范早期实现差异。
如果你写的是 grid-auto-rows: minmax(1rem, auto)，Safari 15.3 及更早版本会直接忽略整条声明，回退到默认的 auto（即由内容定高），但某些嵌套场景下可能表现异常。
- 安全写法：
grid-auto-rows: minmax(1rem, max-content)，max-content兼容性好得多 - 查 Can I Use 时注意看
minmax()子项支持度，不是只看 Grid 整体支持 - 真要兼容老 Safari？干脆不用
grid-auto-rows，改用grid-template-rows配合 JS 动态生成行数
