CSS网格布局无年度更新，其核心问题在于grid-template-areas命名不匹配、fr与%混用导致空间分配异常、dense模式破坏可访问性，以及默认值和隐式行为引发的布局失效。
CSS 网格布局没有“年度总结”这回事——它是一套稳定、可预测的规范，不是每年翻新的框架。所谓“100条技巧”，绝大多数是重复、过时或脱离真实场景的伪需求。
grid-template-areas 为什么总对不上？
常见错误是把 grid-template-areas 当成视觉拖拽工具用：写了一堆名字，但没配 grid-area，或者名字拼错、大小写不一致、空格/换行不匹配。
- 每个区域名必须在
grid-template-areas中完整出现，且每行引号内列数要和grid-template-columns的轨道数一致 -
grid-area值必须和引号内名字完全一致（包括连字符、下划线），不能带空格或引号 - 留空位置用
.（英文点），不是空字符串、空格或none - IE 不支持该属性，哪怕加了
-ms-前缀也只部分兼容，别在生产环境强依赖
fr 单位和 % 在 grid-template-columns 里混用会怎样？
会按定义顺序优先分配剩余空间，但行为不如直觉中“自动均分”那么友好——fr 是弹性份额，% 是基于网格容器宽度的固定比例，二者计算时机不同。
- 比如
grid-template-columns: 200px 1fr 30%：先扣掉200px，再按 1:30 的比例分剩余宽度（不是容器宽的 30%） - 如果容器宽 1000px，30% 实际是 300px，但
1fr分到的是 (1000 − 200 − 300) = 500px，不是“剩下的一半” - 更安全的做法是统一用
fr（如200px 1fr 3fr），或全用%并确保总和 ≤ 100% - 注意：
minmax(0, 1fr)可防止内容撑爆导致溢出，尤其在响应式中比裸1fr更鲁棒
grid-auto-flow: dense 导致元素顺序错乱怎么办？
它会让后续项目“插队”填前面留下的空洞，视觉顺序和 DOM 顺序彻底脱钩，对可访问性（尤其是屏幕阅读器）和键盘焦点流是硬伤。
立即学习“前端免费学习笔记（深入）”；
- 只在明确需要紧凑排列、且已放弃语义顺序的场景下使用（比如纯图库瀑布流）
- 永远不要和
order混用——dense的重排逻辑不尊重order值 - 替代方案：用
grid-auto-flow: row+ 显式定位（grid-row/grid-column）控制关键区块，让其余项自然流动 - 测试时务必用键盘 Tab 切换，看焦点是否跳转到不可预期的位置
真正卡住人的从来不是语法记不住，而是默认值怎么起效、哪些组合会隐式触发重排、以及当父容器尺寸未定（比如 display: contents 下的网格项）时，网格算法直接失效——这些细节文档里不显眼，但线上问题八成出在这儿。
