能撑开行高，但仅限单行内容；子项的 align-self: stretch、height 设置、脱离文档流等会抑制自动撑高，需改用 align-self: start 或 minmax(min-content, max-content)。
grid-template-rows: auto 能不能撑开行高？
能，但只对“单行内容”有效；如果子元素用了 align-self: stretch 或设置了 height，反而会压制自动撑开。关键不是写 auto，而是别让子项强行拉伸或固定高度。
-
grid-template-rows: auto本身是默认行为，显式写不写效果一样 - 真正起作用的是子项的
align-self（默认stretch）——它会让子项填满整行，掩盖内容真实高度 - 如果子项内有
display: flex或position: absolute，也可能导致父行无法感知内容高度
子元素内容多行换行时行高不增加？
常见于 p、div 这类块级元素没设 min-height 或被 overflow: hidden 截断。Grid 行高由“该行所有子项的最大内容高度”决定，但前提是这些高度能被正确测量。
- 确保子项没有
height: 100%或max-height硬限制 - 如果用了
white-space: nowrap，文本不会换行，自然也不会撑高 - 用
min-height: fit-content可以强制子项至少显示自身内容所需高度（Chrome 102+ / Firefox 105+ 支持） - 兼容老浏览器时，更稳妥的做法是去掉子项的
align-self: stretch，改用align-self: start
和 align-items: stretch 有什么冲突？
有。父容器设了 align-items: stretch（默认值），会让所有子项在交叉轴方向拉伸到行高，而这个“行高”此时可能还是初始计算值（比如 0 或最小行高），造成内容被拉变形或截断。
- 把父容器的
align-items改成start或flex-start，子项就不再强制拉伸，行高才能随内容增长 - 如果只想某几列自适应，可以单独给子项加
align-self: start，比改全局更安全 - 注意：
align-items: stretch对grid-template-rows: 1fr这种弹性行依然生效，会优先满足1fr分配，而不是内容高度
用 grid-auto-rows 替代 template-rows 更靠谱？
对动态内容更合适。如果你不确定每行内容高度，grid-auto-rows 是控制“新增行”的默认高度，而 grid-template-rows 是预定义的固定结构，容易卡死。
立即学习“前端免费学习笔记（深入）”；
- 写成
grid-auto-rows: minmax(min-content, max-content)，能让每行按内容最小所需高度起步，上限不限 - 搭配
grid-template-rows: auto一起用也没问题，但前者优先级更高，尤其在隐式网格中 - 避免用
grid-auto-rows: 100px这种固定值，否则新行永远 100px，内容溢出也不撑开 - IE 不支持
minmax()，若需兼容，只能退回到grid-auto-rows: auto+ 子项align-self: start
最常被忽略的一点：CSS Grid 的行高计算依赖于子项的“正常流高度”。只要子项脱离了正常流（比如 position: absolute、float、或者父级 display: contents），那一行就会塌陷成 0 高——这时候再调 grid-auto-rows 也没用。
