Grid行高不一致是因为grid-template-rows未显式设高时按内容撑开，每行独立计算；需配合grid-template-rows: 1fr与grid-auto-rows: 1fr实现全行等高，并设min-height: 0防溢出。
Grid默认行为为什么会让行高不一致
Grid容器里子项高度不同，是因为grid-template-rows没显式设高时，浏览器按“内容撑开”原则逐行计算——每行只看该行内所有grid-item的自然高度，互不影响。这不是bug，是规范定义的stretch对齐在单行内的局部生效逻辑。
常见错误现象：display: grid后卡片高度参差不齐，尤其文字行数不同时；用align-items: stretch也无效，因为 stretch 只作用于单个网格单元格内部，不跨行拉齐。
- 如果用
grid-auto-rows: 1fr，它只对隐式行（超出模板定义的行）生效，对显式定义的grid-template-rows: auto行不起作用 -
minmax(min-content, 1fr)比纯1fr更安全，避免内容溢出或高度塌缩 - IE不支持
1fr单位，若需兼容，得回退到display: flex+flex: 1方案
用grid-template-rows: 1fr强制等高必须配grid-auto-rows
只写grid-template-rows: 1fr只能让第一行等高，后续行仍按auto算——因为grid-template-rows只定义显式行数，而多数布局（比如grid-template-columns: repeat(3, 1fr)）会生成多行隐式行。
正确做法是两者配合：
立即学习“前端免费学习笔记（深入）”；
container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr; /* 显式行设为等高 */
grid-auto-rows: 1fr; /* 隐式行也等高 */
}-
grid-template-rows和grid-auto-rows值最好一致，否则视觉断裂 - 若某行需要固定高度（如带标题的首行），可写成
grid-template-rows: 80px 1fr，但后续grid-auto-rows仍应为1fr保持一致性 - 用
height: 100%或min-height: 100vh在容器上补足视口高度，否则1fr可能按内容最小高度结算
内容溢出时overflow和min-height谁先起作用
等高后常遇到文字多的项把卡片撑破、遮挡下一行——这是因为1fr分配的是可用空间，但子元素若没限制，仍会突破分配高度。
关键顺序：Grid先按1fr分好高度 → 子元素在分配后的高度内渲染 → 此时overflow才生效。
- 必须给网格项加
min-height: 0（或min-height: auto），否则Flex/Grid子项默认min-height: auto会阻止收缩，导致溢出失效 - 文字截断要配
display: -webkit-box或line-clamp，单纯overflow: hidden对多行文本无效 - 慎用
height: 100%代替min-height: 0，它会彻底锁死高度，失去响应性
用align-content: stretch替代1fr？别试
align-content: stretch看起来像能拉齐所有行，但它只在容器有剩余空间（即grid-template-rows总和小于容器高度）时才生效；一旦内容撑满，它就完全没效果。实际项目中几乎无法稳定触发。
对比测试结果：align-content: stretch在Chrome/Firefox中表现不一致，Safari甚至忽略该值对grid容器的影响。
- 这个属性本意是控制多行之间的间距分布，不是控制单行高度
- 即使生效，它也不改变每个网格项的
block-size，只是拉伸行间隙，内容仍可能错位 - 真正可靠的只有
1fr系方案，其他都是边缘hack
等高不是靠对齐，是靠空间分配。别被align-前缀迷惑——它管的是位置，不是尺寸。
