grid-template-columns 不会继承，因为它是非继承属性，仅作用于声明 display: grid 的容器及其直接子元素；子网格需显式定义或使用 subgrid 引用父级显式轨道。
grid-template-columns 为什么不会从父容器继承
因为 CSS Grid 的轨道定义（grid-template-columns、grid-template-rows）根本就不是可继承属性——它只对当前声明了 display: grid 的容器生效，且作用域严格限定在该容器的直接子元素上。
浏览器不实现继承逻辑，这不是遗漏，而是规范设计：每一层网格都必须是显式、独立的布局上下文。父容器的列定义只服务于它的直系子项，不会“透传”给孙子或更深层的嵌套结构。
- 写了
grid-template-columns: 1fr 2fr的父容器，其子元素即使也设了display: grid，也不会自动获得这两列；它默认只有单列（grid-template-columns: none） -
grid-template-areas同样不继承，子容器若想用命名区域，必须自己写grid-template-areas - 想让子容器复用父列线？唯一标准路径是
subgrid，但它要求父容器有显式轨道、子元素是直接子项、且子容器显式声明grid-template-columns: subgrid
常见误判：以为 display: grid 就等于“接入父网格”
很多人给子容器加了 display: grid，就默认它能“顺带”对齐外层列线。结果发现子项堆在第一列，或者列宽错位——这是因为子容器此时是一个全新的、无列定义的网格，它的 1fr 是按自身宽度算的，和父容器完全无关。
验证方式很简单：用 DevTools 看子容器的 Computed 样式，搜 grid-template-columns。如果值是 none 或空，说明它没定义列，不是“继承失败”，而是压根没设。
- 错误写法：
.child { display: grid; }→ 子容器变成单列网格 - 正确写法（独立定义）：
.child { display: grid; grid-template-columns: 1fr 1fr; } - 正确写法（复用父线）：
.child { display: grid; grid-template-columns: subgrid; }（前提是父容器有显式grid-template-columns，且该元素是父的直接子项）
subgrid 不是继承，是显式委托
subgrid 容易被当成“继承开关”，但它其实是一种轨道引用协议：你必须主动说“我要用父级的列线”，浏览器才去查父容器有没有可被引用的显式轨道。
一旦漏掉任一条件，subgrid 就退化为普通网格——比如父容器用了 repeat(auto-fit, minmax(300px, 1fr)))，这生成的是隐式轨道，subgrid 就找不到可绑定的列线，整条声明被忽略。
- 父容器必须有显式列定义，例如：
grid-template-columns: 1fr 2fr 1fr（✅）；不能只有grid-auto-columns: 1fr（❌） - 子元素必须是父网格的**直接 DOM 子节点**，中间不能插
display: contents、flexwrapper 或普通div - 不能混写：
grid-template-columns: subgrid 1fr会整条规则失效，只能二选一：全subgrid，或全自定义
嵌套三层以上时，别硬扛 subgrid
三层嵌套 + subgrid 很容易失效，因为孙子层的 subgrid 对齐的是中间层的轨道，不是顶层原始定义；而中间层只要加了 gap、grid-row: span 2 或动态生成轨道，就会插入隐式线，切断映射链。
真实项目中，三层以上优先考虑降级方案：
- 外层用 Grid 做大框架（如页面布局），内层简单排列改用
display: flex（比如卡片内部图标+文字横排） - 避免在
@media或伪类中切换grid-template-columns，改用grid-column单属性动画更轻量 - 如果必须多层 Grid，确保中间层零干扰：不设
gap、不用auto-fit、不手动插入空元素
最常被忽略的其实是 DOM 层级关系——subgrid 看的是真实 HTML 结构，不是视觉嵌套。删掉一个 wrapper，有时比调十行 CSS 更有效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
