为什么在CSS Grid中使用百分比高度常常无法生效？
在css grid布局中，百分比高度失效的核心原因是网格容器的高度默认由内容撑开，导致作为基准的100%没有实际数值。要让百分比高度生效，必须显式地为网格容器或其父级设置确定的高度（如`100vh`或固定像素值），或者使用`min-content`、`max-content`等基于内容的尺寸关键字来替代百分比。
如何通过显式高度让百分比生效？
通过为网格容器设置具体的视口高度或父级高度，可以为内部的百分比元素提供计算基准。例如，将容器的`height`设置为`100vh`后，子元素的`height: 50%`就能正确渲染为视口高度的一半。
/* HTML结构 */
<div class="grid-container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
</div>
/* CSS */
.grid-container {
display: grid;
height: 100vh; /* 关键：提供明确的高度基准 */
grid-template-rows: 1fr 1fr;
}
.item {
background-color: lightblue;
/* 此时百分比基于100vh生效 */
}
不使用显式高度时有哪些替代方案？
如果不希望依赖父级的显式高度，可以使用`fr`单位或`min-content`/`max-content`关键字。`fr`单位会自动分配剩余空间，不受具体高度数值限制；而`min-content`则根据内容最小需求确定高度，适合不需要精确百分比控制的场景。
.grid-container {
display: grid;
/* 不设置height，而是使用fr自动分配 */
grid-template-rows: 1fr 1fr;
}
.item {
/* 使用fr单位代替百分比 */
height: auto;
}
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
