根本原因是.grid-container的computed height为auto，导致子项height:100%无基准可算而退化为0px；必须确保html、body及所有中间父容器均设height:100%或显式高度，且避免min-height替代height。
子元素height: 100%不生效，根本不是子元素写错了
浏览器根本算不出“100%”对应多少像素——因为.grid-container的computed height是auto。哪怕你写了grid-template-rows: 1fr 2fr，只要容器自身没高度，1fr就等于0px，子项的height: 100%自然退化为0。
快速验证：打开开发者工具，选中网格容器，在「Computed」面板里看height值。如果是auto，整条链路就断了。
- 必须确保
html、body及所有中间父容器（如.wrapper）都设了height: 100%或显式高度（如min-height: 100vh） -
min-height: 400px不能代替height: 100%——前者不提供百分比计算基准 - 临时加
border: 1px solid red到容器上，如果只看到一条线，说明它视觉塌陷了 - 嵌套在Flex里时，外层Flex项需设
flex: 1，Grid容器再配height: 100%; min-height: 0防拉伸干扰
子元素min-height被忽略，大概率是轨道锁死了高度
min-height不会倒推父容器变高，它只在父容器已有可计算高度的前提下起作用。如果你的grid-template-rows写的是固定值（比如100px或2fr），那子项的min-height: 200px很可能被跳过——浏览器优先按轨道分配空间。
想让某行“至少200px”，别依赖子项，直接把约束写在轨道层：
- 用
grid-template-rows: minmax(200px, 1fr)，而非1fr+ 子项min-height - 若行数不确定，改用
grid-auto-rows: minmax(200px, max-content) - 绝对定位子项的
min-height基本无效——它的包含块通常不是Grid容器，而是最近的非static祖先
子元素撑不开网格区域，align-items: stretch被悄悄关掉了
默认align-items: stretch只在子元素**没声明块轴尺寸**时生效。一旦子项写了height、max-height甚至min-height: 0（某些CSS重置库会塞这个），stretch就被覆盖，子项立刻“放弃拉伸”。
检查方式：在开发者工具中选中一个没拉伸的子项，看align-self是否为auto，再确认height和max-height是否为auto。
- 批量重置：
.grid > *统一加align-self: stretch - 删掉所有子项上的
height和max-height；min-height可保留，但避免设min-height: 0 - 如果子项内部用了Flex或Grid，也得给它的直接子元素加
min-height: 0，否则撑开会逐层传导
内容溢出导致轨道变形，min-width: 0才是关键开关
Grid子项默认min-width: auto，长URL、无空格文本、未约束图片都会强制拉宽轨道，表面看是“撑破”，实则是浏览器按内容最小宽度计算尺寸。只加overflow: hidden没用——它只裁剪视觉，不改变尺寸计算逻辑。
真正起效的是显式重置尺寸下限：
- 必须在Grid直接子元素（即
.grid > .item）上设min-width: 0，不是容器，也不是内层div - 搭配
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)，让1fr轨道能真正收缩到0 - 要让
text-overflow: ellipsis生效，四个条件缺一不可：min-width: 0、white-space: nowrap、overflow: hidden、width或max-width（不能是100%）
最常被忽略的一点：所有这些失效，几乎都始于网格容器自身没有明确高度上下文。别急着调子项，先盯住.grid-container的computed height是不是像素值——这是所有修复动作的前提。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
