vw/vh在grid-template中失效因容器未占满视口；应设width:100vw/height:100vh、清除body margin、避免padding；gap导致背景截断时用margin:-gap/2抵消；fr未铺满需确保height:100vh且无干扰样式；响应式网格宜用CSS变量+calc()避免重排。
grid-template 用 vw/vh 单位会失效？
直接写 grid-template-columns: repeat(10, 10vw) 看似合理，但实际网格项宽度可能严重偏离预期——因为 grid-template-columns 中的 vw 是相对于视口计算的，而 Grid 容器自身若没占满视口（比如有 margin、父容器限制或未设 width: 100%），子项就会按“容器宽度 × 10vw”缩放，结果就是网格被压缩或溢出。
真正可靠的方案是让容器先撑满视口：
- 给 Grid 容器加
width: 100vw和height: 100vh（注意：不是100%） - 清除 body 默认 margin：
body { margin: 0; } - 避免在容器上设 padding，否则会进一步挤压可用空间
全屏网格背景需要 gap 但又不能留白？
加 gap 后，最后一行/列常被截断，尤其当使用 repeat(auto-fit, minmax(...)) 时，浏览器会在容器末尾硬留一个 gap 空隙，导致背景不连续。
解决方法不是去掉 gap，而是用负 margin 抵消：
- 设
gap: 1rem - 同时加
margin: -0.5rem（即 -gap/2）到容器上 - 确保容器父级不触发 overflow:hidden 或有 border，否则负 margin 会被裁剪
示例：
grid-container {<br> display: grid;<br> width: 100vw;<br> height: 100vh;<br> grid-template: repeat(10, 1fr) / repeat(10, 1fr);<br> gap: 1rem;<br> margin: -0.5rem;<br>}
grid-template-rows/columns 用 fr 单位却没铺满视口？
1fr 是按剩余空间分配，不是按视口等分。如果容器里有内容撑高了自身，或设置了 align-content: start，fr 行就可能集体收缩，留出大片空白。
关键控制点：
- 必须设
height: 100vh且无其他高度干扰（如 min-height、flex 父容器默认对齐） - 避免在 grid 容器上用
align-items或justify-items，它们会影响轨道尺寸计算 - 若需等分，优先用
repeat(10, 1fr)而非1fr 1fr ...，减少手误和维护成本
背景网格要响应式但不能重绘闪烁？
用媒体查询反复改 grid-template-columns 会导致 layout thrashing，尤其在 resize 时网格频繁重排，视觉上像“抖动”。
更稳的做法是用 CSS 自定义属性 + calc：
- 定义
:root { --grid-cols: 10; } - 容器中写
grid-template-columns: repeat(calc(var(--grid-cols)), 1fr) - JS 只需动态改
--grid-cols值，CSS 引擎内部处理，不触发重排 - 注意：
calc()里不能直接用min()或max()做响应逻辑，得靠 JS 判断后赋值
复杂点在于：Grid 的 track 数量变化时，子元素 DOM 结构不变，但视觉布局突变——这点容易被忽略，测试时务必拖拽窗口边缘观察过渡是否自然。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
