是，grid-template-rows用百分比会触发滚动条；因百分比仅基于容器height计算，不包含gap，导致总高度超100%，而fr单位自动将gap纳入布局计算，避免溢出。
grid-template-rows 用百分比会触发滚动条？
直接写 grid-template-rows: 30% 70% 看似合理，但只要容器有 gap，浏览器就会把 gap 尺寸额外加在百分比总和之外，导致实际高度超过 100%，body 溢出并出现垂直滚动条。
这不是 bug，而是 CSS 盒模型的计算逻辑：百分比行高只按“容器 height”分配，不预留 gap 空间；而 gap 是额外叠加的。
- 放弃所有
%行高，改用fr单位 —— 它天然把 gap、border、padding 全部纳入布局计算 -
height: 100vh必须设在 Grid 容器上（不是html或body），否则fr无可用空间可分 - 确保
body { margin: 0 }，否则100vh会被默认 margin 撑开，照样溢出
全屏网格背景用 vw/vh 设列宽为什么错位？
grid-template-columns: repeat(10, 10vw) 在多数情况下不会生成等宽 10 列 —— 因为 10vw 是相对于视口算的，而 Grid 容器自身若没占满视口（比如被父元素限制宽度、或有 padding），子项就按“容器宽度 × 10vw”缩放，结果列宽严重失真。
- 先让容器撑满：给 Grid 容器加
width: 100vw和height: 100vh - 清除
body默认margin，否则100vw会因 margin 溢出产生横向滚动条 - 避免在容器上设
padding；如需内边距，改用grid-gap或子项padding
如何让全屏滚动网格不截断最后一行？
启用 scroll-snap-type: y mandatory 后，若每页用 height: 100vh + gap，最后一行常被裁掉 —— 浏览器会在最后一项后硬留一个 gap 高度，导致内容区域超出视口。
- 不用删
gap，而是加负外边距抵消：margin: -0.5rem（对应gap: 1rem） - 确保父容器不设
overflow: hidden或border，否则负 margin 会被裁剪 - 滚动容器必须设
scroll-padding-top: env(safe-area-inset-top)，防止刘海屏下 snap 错位
响应式全屏网格要不要用 minmax() + auto-fit？
可以，但必须配合 min-width: 0 和显式容器尺寸，否则真实项目中极易失控。例如小屏下一张未设 max-width: 100% 的图撑宽整行，auto-fit 就会错误维持 2 列并横向溢出。
- 优先在媒体查询里写死列数：
@media (max-width: 767px) { grid-template-columns: 1fr; } - 如果坚持用
repeat(auto-fit, minmax(300px, 1fr))，务必给所有直接子项加min-width: 0 -
minmax(300px, 1fr)中的300px是硬门槛：容器宽
真正难的不是写对某一行代码，而是理解 fr 和 vh 的锚定对象不同、gap 在不同上下文里的计算权重、以及负 margin 抵消时父容器的裁剪边界 —— 这些细节一旦漏掉一个，全屏效果就立刻崩掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
