grid-template-areas适合技能槽语义化布局，需为功能区单独命名并用.占位；minmax()配合grid-auto-columns实现背包格子自适应；grid-row/column精准叠放图标与标签；box-shadow替代outline避免gap冲突。
grid-template-areas 适合做技能槽固定区域布局
技能槽通常有明确语义分区：主技能区、快捷栏、被动技能格、冷却遮罩层。用 grid-template-areas 能一眼看清结构关系，比纯数字行列定位更易维护。
常见错误是把所有槽位写成同一类 skill-slot，结果响应式时被动区被挤进快捷栏——其实它们逻辑上不该共用同一 grid-area 名。
- 每个功能区单独命名：
"main main main" "quick quick quick" "passive passive ." - 空格用
.占位，别留空字符串或""，否则部分浏览器解析异常 - 配合
grid-auto-flow: dense可让小尺寸下被动格自动填入快捷栏右侧空隙，但要慎用——它可能打乱 dom 顺序，影响键盘导航
grid-auto-columns + minmax() 控制背包格子等宽自适应
背包格子数量不固定（比如 24 格 vs 48 格），又要求在不同屏幕宽度下都保持正方形且不换行，硬写 grid-template-columns: repeat(8, 1fr) 会撑破容器或压缩过小。
用 minmax() 配合 grid-auto-columns 更稳妥，它让浏览器按内容区可用宽度动态决定列数，而不是强行塞满指定列数。
立即学习“前端免费学习笔记（深入）”；
-
grid-auto-columns: minmax(64px, 1fr)—— 每列最小 64px，最大均分剩余空间 - 必须搭配
grid-auto-flow: column或row，否则grid-auto-columns不生效 - 注意 safari 旧版本对
minmax()中fr单位支持不稳定，可降级为minmax(64px, 80px)+grid-template-columns: repeat(auto-fill, 1fr)
grid-row / grid-column 定位叠加图标与状态标签
技能槽常需在格子右上角加冷却倒计时、左下角叠装备图标、中间居中显示技能名——这些不是独立区块，而是同一格子内的多层覆盖。用绝对定位容易脱离网格流，导致缩放错位或焦点丢失。
直接用 grid-row 和 grid-column 把各元素“钉”在同一个格子内，再用 z-index 控制层级，DOM 结构干净，缩放和 focus 管理也自然对齐。
- 父容器设
position: relative是冗余的，Grid 本身已建立定位上下文 - 子元素写
grid-row: 1; grid-column: 1;即可复用同一格子，无需额外 wrapper - 若某格子需要偏移（如冷却数字右上角），用
justify-self: end; align-self: start;，比transform更稳定
gap 与 outline 冲突导致视觉错位
调试时发现格子之间明明写了 gap: 8px，但实际间距忽大忽小，甚至某些格子边缘发虚——大概率是用了 outline 做选中高亮，而 outline 不参与盒模型计算，会盖住 gap 留出的空间。
游戏 UI 对焦点反馈敏感，但 outline 在 Grid 布局里就是个视觉陷阱。
- 改用
box-shadow: 0 0 0 2px #4a90e2替代outline，它受gap影响，渲染位置准确 - 若必须用
outline（比如兼容旧键盘导航逻辑），请同步增加outline-offset: 2px避免压住 gap - 不要给
grid-container自身加border或outline，它会干扰子项的grid-area边界判断
真正麻烦的是嵌套 Grid：背包格子内部再套一层 Grid 显示物品堆叠数和品质边框，这时候 gap、padding、border 的三层叠加很容易吃掉本就不多的像素空间——得用 calc() 手动扣减，别指望浏览器自动对齐。