嵌套 grid 必须每层显式声明 display: grid，否则 grid-column 等属性失效；子容器未设该属性会导致布局错位；推荐用 grid-column: 2 / -1 或 span 适配变化，慎用三层以上嵌套，ie11 需整体降级。
嵌套 Grid 不是“自动继承”的能力，必须每层都显式写 display: grid，否则子元素的 grid-column、grid-template-areas 全部失效——这是 90% 布局错位的根源。
子容器没设 display: grid，grid-column 就不生效
常见现象：外层网格里放了个 <div class="card">，里面写了 <code>grid-column: 2，结果它还是堆在左上角。因为 .card 本身不是网格容器，它的子元素根本读不到 Grid 属性。
- 验证方法：选中该元素，在 DevTools 的 Computed 面板看
display是否为grid或inline-grid - 修复方式：给
.card加display: grid，哪怕它只有一列：grid-template-columns: 1fr - 别依赖父级的
grid-area名字穿透到孙子级——grid-template-areas只作用于直系子元素
想对齐列线？别靠猜，用负索引或 span 安全跨列
外层定义了 grid-template-columns: 1fr 2fr 1fr，你想让子网格横跨后两列。写 grid-column: 2 / 4 看似合理，但一旦外层列数变动（比如加一列），就崩了。
- 推荐写法：
grid-column: 2 / -1——-1指向隐式最后一根线，适配列数变化 - 或用
grid-column: span 2，但注意：嵌套层级一多，span 2在子网格里是指“本层的 2 列”，不是外层的 - 若需严格视觉对齐（比如表头和数据行），优先考虑
subgrid：grid-column: subgrid，但得确认浏览器支持（Firefox 111+、Chrome 117+、Edge 117+；Safari 仍不支持）
三层以上嵌套？先砍掉一层，改用 display: flex
Chrome Layers 面板里看到多个重叠的 “Grid Overlay”，滚动卡顿、resize 延迟明显——这不是代码写错了，是渲染引擎真扛不住。
- 典型结构
body → section → article → card已达 4 层，建议把最内层.card改成display: flex，只保留两层 Grid（外层区域划分 + 中层模块分组） - 避免在
@media或:hover里动态切换grid-template-columns，改用grid-column单属性动画更轻量 - 稳定不变的网格容器加
contain: layout style paint，提示浏览器跳过不必要的重排
IE11 兼容性下，嵌套 Grid 必须整体降级
@supports (display: grid) 在 IE11 里根本不被识别，所有嵌套逻辑都会静默失效——子项退化为块流，grid-column 被忽略，auto-placement 不可靠。
- 别试图用 JS 检测后再 patch，成本远高于降级方案
- 降级路径：外层用
float+clear或inline-block模拟三栏；内层用flex排列，彻底绕开 Grid - 如果项目必须支持 IE11，从设计阶段就放弃嵌套 Grid 思路，用语义化类名 + 媒体查询控制显隐更可控
真正难的不是写几层 display: grid，而是判断哪一层该用 Grid、哪一层该收手换 Flex——线号对齐、性能拐点、兼容性断层，这些地方不手动踩一遍，很难有真实手感。
