本文讲解如何通过 fr 单位替代百分比定义 Grid 行高，结合 gap 正确分配容器空间，实现无滚动条、跨设备一致的全高响应式布局。
本文讲解如何通过 `fr` 单位替代百分比定义 grid 行高，结合 `gap` 正确分配容器空间，实现无滚动条、跨设备一致的全高响应式布局。
在构建全屏高度的 CSS Grid 布局时，一个常见误区是使用百分比（如 30% 70%）定义 grid-template-rows。虽然看似直观，但该方式与 gap 存在根本性冲突：百分比行高基于容器内容高度计算，而 gap 是额外插入的间距，不参与百分比基数运算。结果导致总高度超出 100%，触发垂直滚动条——尤其在不同浏览器（Firefox/Edge）或操作系统（Windows/Linux）下表现不一致，正如问题中所遇的 98.5% 临时修复或 calc(100% - 10px) 失效现象。
根本解法是摒弃百分比，改用 fr（fractional unit）单位。fr 是 Grid 专属弹性单位，它在分配剩余空间时自动将 gap 纳入布局计算，确保各行之和严格等于容器可用高度（扣除 gap 后），彻底消除溢出风险。
以下是推荐的健壮实现：
body, html {
height: 100%;
margin: 0;
}
.grid-container {
display: grid;
grid-template-rows: 3fr 7fr; /* 弹性分配：上3份，下7份，等价于30%:70%语义 */
grid-template-columns: 1fr 1fr;
gap: 10px; /* 间距被自动纳入布局，无需手动减去 */
height: 100vh; /* 推荐使用 vh 确保视口级全高 */
width: 100%;
}
.grid-container button {
padding: 10px;
}
.console {
grid-column: span 2; /* 横跨两列 */
color: #F12;
background-color: #123;
/* 移除 height: 100% 或 height: 98.5% —— fr 已保证其占满分配行高 */
}对应 HTML 结构保持简洁：
立即学习“前端免费学习笔记（深入）”；
<div class="grid-container"> <button>Button 1</button> <button>Button 2</button> <div class="console">Textoutput here...</div> </div>
✅ 关键优势说明：
- 3fr 7fr 不依赖容器内容高度，而是按比例分割 grid-container 的可用高度（即 100vh 减去 gap 总和）；
- .console 不再需要 height 声明——Grid 自动将其拉伸至所在行的全部高度；
- gap: 10px 被原生支持，无需任何 calc() 补丁，跨浏览器兼容性极佳；
- 使用 100vh 替代 100% 可规避 html/body 百分比继承链的潜在不确定性，提升可靠性。
⚠️ 注意事项：
- 避免在 Grid 容器内混用 height: 100% 与百分比行定义，易引发循环依赖；
- 若需支持旧版浏览器（如 IE），fr 单位不可用，此时应降级为 Flexbox 或 JavaScript 动态计算高度；
- 当 .console 内容实际高度超过分配行高时（如大量文本），可添加 overflow-y: auto 实现内部滚动，而非页面级滚动。
综上，fr 单位是 CSS Grid 中处理“按比例分配剩余空间”的黄金标准。它不仅语义清晰、代码简洁，更从底层机制上解决了 gap 与百分比共存的布局矛盾，是构建稳定、可维护全高响应式界面的首选方案。
