height: 50% 在 Grid 中常失效，因它依赖父容器明确高度；若 html、body 未设 height: 100%，或 Grid 容器无 height/min-height，则百分比退化为 0；推荐用 100vh、100dvh 或 aspect-ratio 替代。
为什么 height: 50% 在 Grid 中经常失效
百分比高度在 Grid 里不是“相对于父容器高度的 50%”，而是“相对于包含块（containing block）的已知高度”——如果父级没显式设高，浏览器就按 0px 计算，结果就是子项塌成一条线。常见现象：Grid 容器写了 grid-template-rows: 50% 50%，但两行高度几乎为 0；或者 .item { height: 100% } 完全没反应。
真正能用 % 高度的唯一可靠前提
必须保证从 html → body → Grid 容器这条链上，每个祖先都具备可计算的高度。否则所有百分比都会退化为 0。
-
html, body { height: 100%; margin: 0; }是底线，缺一不可 - Grid 容器自身不能依赖
auto高度，得写height: 100%或min-height: 100vh - 若容器嵌套在 Flex/Grid 父级中，父级也必须有明确高度（比如
height: 100%或100vh）
100vh 比 100% 更值得优先考虑
100vh 不依赖祖先高度，直接取视口当前高度，语义清晰、行为确定。尤其适合全屏布局或固定比例单元格。
- 移动端 Safari 地址栏缩放时
100vh可能抖动，此时改用100dvh（Chrome 105+/Safari 16.4+ 支持） - 内容可能超长？用
min-height: 100vh替代height: 100vh，避免底部被截断 - 别混用：
grid-template-rows: 50vh 50vh比50% 50%稳定得多，且 gap 会自动从总高里扣除
当必须用百分比时，aspect-ratio 是更现代的替代方案
如果你本意是让网格项保持正方形或固定宽高比（比如卡片列表），height: 50% 其实是误用——它不保证比例，只尝试按父高缩放。而 aspect-ratio: 4 / 3 是 CSS 原生比例控制，不依赖父容器高度是否已知。
立即学习“前端免费学习笔记（深入）”；
-
.grid-item { aspect-ratio: 1 / 1; width: 100%; }就能稳定产出正方形，哪怕父容器高度是auto - 搭配
object-fit控制图片渲染，比靠百分比“猜”高度靠谱得多 - 注意兼容性：
aspect-ratio在 Safari 15.4+/Chrome 88+/Firefox 89+ 已稳定支持，2026 年基本可放心用
%，不如明确锚定到 vh 或转向 aspect-ratio 这类语义更清晰的机制。 
