subgrid跨组件对齐需同时满足三条件：父容器显式定义命名轨道、子组件为直接子节点、响应式逻辑仅在根层控制；任一缺失则computed样式中subgrid值为none。

移动端用 subgrid 实现跨组件对齐，不是“加个属性就对齐”，而是必须同时满足三个硬性条件：父容器显式定义轨道、子组件是真实直接子节点、响应式逻辑全部收口在根层——漏掉任一环，grid-template-columns: subgrid 在 computed 样式里直接显示为 none，浏览器根本没执行它。

父容器必须声明显式列/行轨道，不能靠 auto-fit 或 auto-rows

移动端常见错误是父容器只写 display: grid 和 gap，或者用 repeat(auto-fit, minmax(300px, 1fr)))。这些都不算“显式轨道”，subgrid 无法继承。

• ✅ 正确写法：grid-template-columns: [left] 1fr [main] 2fr [right] 300px 或 grid-template-rows: auto 1fr [footer]
• ❌ 错误写法：grid-auto-columns: 1fr、grid-template-columns: repeat(auto-fit, ...)、grid-template-rows: repeat(3, auto)（后者虽带数字但属隐式重复，部分浏览器仍不认）
• ⚠️ 验证方式：Chrome DevTools → Layout 面板 → 勾选 “Show line names”，看到实线（非虚线）才表示轨道被识别

子组件必须是父网格的直接子元素，中间不能插任何 wrapper

哪怕只多一层

，或用了 display: contents、fieldset、甚至 JS 动态插入时带的空文本节点，DOM 层级就断了，subgrid 继承链立即失效。

• ✅ 正确结构：
  ，且每个 .card 设 grid-column: main
• ❌ 错误结构：
• ⚠️ 特别注意：Vue/React 组件库常自动包裹一层
  ，需用 asChild 或透传 className 绕过，不能依赖“视觉上没多一层”

  响应式切换必须只在父容器做，子层禁用 media query

  subgrid 本身不响应，它的列/行变化完全依赖父容器轨道重定义。子组件一旦自己写 @media 并改 grid-template-columns，就退化成独立网格，和父轨道再无关系。

  

  CSS工具箱(专业版)

  全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

  下载

  • ✅ 正确做法：@media (max-width: 768px) { .list { grid-template-columns: 1fr; } }，子层保持 grid-template-columns: subgrid 不变
  • ❌ 错误做法：在 .card 上写 @media (max-width: 768px) { grid-template-columns: 1fr 1fr; } —— computed 样式中该声明会变成 none
  • ? 提示：若需 PC 端 4 列、移动端 1 列，不要强求单个父容器自适应，拆成两个独立 .list 容器更稳

  命名线是唯一可靠锚点，数字索引在嵌套中极易错位

  父容器用 [main]、[footer] 定义命名线，子组件统一用 grid-column: main 或 grid-row: footer。用数字索引（如 grid-column: 2）在嵌套或动态插入场景下极易漂移——尤其当某张卡片缺标题或按钮时，行数变化，数字就全乱了。

  • ✅ 推荐：.card { grid-row: 1 / -1; } + button { grid-row: footer; justify-self: center; }
  • ❌ 避免：.card { grid-row: span 4; }（假设父有 4 行），一旦某卡片内容增减导致父行数变化，子项定位就崩
  • ⚠️ 注意：grid-template-rows: [label] subgrid 是无效语法，命名线必须定义在父容器，子层只能消费，不能重声明

  真正卡住人的从来不是语法写错，而是 computed 样式里 grid-template-columns 显示为 none 却还在调样式、查 JS；最易忽略的是那个看不见的换行符、组件库悄悄加的 wrapper、或者以为“写了 repeat(3, 1fr) 就算显式”的认知偏差。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！