盒模型不构建网格，display: grid 及其属性才负责；grid-template-columns 不继承，需显式设置；gap 优于 margin，旧 Safari 需双写；嵌套超 3 层应降级为 flex 或加 contain 优化性能。
盒模型本身不“打造”网格系统，它只负责单个元素的尺寸计算和内外间距；真正构建网格的是 display: grid 及其配套属性。把盒模型当网格基建，是常见误判的起点。
为什么 grid-template-columns 不继承到子容器
嵌套的 div 设了 display: grid，它的 grid-template-columns 完全独立，不会从父级“拿”过来。浏览器没做这层继承逻辑，subgrid 目前也仅在 Chrome 127+ 有限支持，Safari 和 Firefox 仍缺或受限。
- 常见错误现象：外层写了
grid-template-columns: 1fr 2fr 1fr，内层没写列定义，结果所有子项堆在第一列 - 必须显式给每个嵌套
display: grid容器写grid-template-columns（哪怕只是1fr） - 若需视觉对齐，用
grid-column: 2 / 4这类定位手动匹配外层列号，而不是指望“自动继承” -
grid-template-areas在嵌套中只作用于直系子元素，孙子级写grid-area: "sidebar"会被忽略
gap 和 margin 混用导致布局错位
子元素的 margin 不会塌陷，但会干扰网格轨道尺寸计算——尤其当 padding 或 border 参与盒模型计算时，fr 分配的剩余空间会变少，列宽实际收缩。
-
gap是网格专用间距，不占内容空间，不影响fr计算；margin是盒模型行为，会挤占可用宽度 - 旧版 Safari（≤15.4）不支持
gap，建议双写：grid-gap: 12px; gap: 12px - 别在网格项上同时设
gap和margin，否则间距翻倍或错位，DevTools 的 “Layout Shift” 提示常源于此 - 调试技巧：打开 Chrome DevTools → Elements 面板 → 勾选 “Show grid line numbers”，直接看每条线编号是否对齐
嵌套超过 3 层时性能明显下降
Chrome Layers 面板里出现大量重叠的 “Grid Overlay” 图层、滚动卡顿、resize 延迟，或 Safari 下 layout 时间飙升，不是 bug，而是当前渲染引擎对多层 grid layout 的真实开销。
立即学习“前端免费学习笔记（深入）”；
- 典型高危结构：body → section → article → card → header + content + footer（5 层）
- 缓解方式：3 层以上优先用
display: flex替代内层简单排列（比如 card 内部横排图标+文字） - 对稳定不变的嵌套 grid 容器加
contain: layout style paint，提示浏览器跳过重排 - 避免在
@media或:hover中切换grid-template-columns，改用grid-column单属性动画更轻量
真正容易被忽略的点是：盒模型参数（padding、border、box-sizing）只影响单个元素尺寸，不参与网格线对齐逻辑；而开发者常试图靠调 padding 让子项“看起来”对齐外层列线——这只会让错位更隐蔽、更难调试。
