Subgrid本身不响应，必须由父网格驱动响应；父容器需明确定义grid-template-columns（如1fr或repeat(4,1fr)），禁用gap、auto-fit等干扰项，子元素须同时设display: grid和grid-template-columns: subgrid，并用grid-column: span N匹配父列数。
移动端用 CSS subgrid 实现复杂嵌套网格自适应，核心不是让子网格“自己响应”，而是让父网格驱动响应、子网格安静继承——subgrid 本身不支持媒体查询切换轨道，也不处理 auto-fit 或 minmax() 的动态推演。
为什么只写 display: grid + grid-template-columns: subgrid 还是不对齐？
最常见原因是父容器没定义明确的列轨道，或者加了干扰项：
- 父级用了
grid-auto-columns或repeat(auto-fit, ...)，但subgrid只能继承显式声明的grid-template-columns（比如1fr 2fr 1fr或repeat(4, 1fr)） - 父级写了
gap，而子元素没用grid-column: span N覆盖整行，导致隐式轨道插入，破坏对齐基线 - 子元素漏写了
grid-column: span N（N 必须等于父网格总列数），仅靠subgrid不会自动占满 - 用了已废弃的
display: subgrid，现代标准只认display: grid+grid-template-columns: subgrid
如何让移动端 1 列、平板 2 列、PC 4 列，且卡片内元素始终对齐？
不能指望单个 subgrid 在不同断点“自己变列数”——它只是镜像，不是控制器。正确做法是分层响应：
- 在父容器上用
@media切换grid-template-columns，例如：grid-template-columns: 1fr→repeat(2, 1fr)→repeat(4, 1fr) - 所有子卡片保持
grid-template-columns: subgrid和grid-column: span 1（移动端）或span 2（平板）等，数值必须与当前父列数一致 - 卡片内部若需底部对齐（如价格+按钮固定在底），父网格需明确定义行轨道，例如：
grid-template-rows: 1fr auto，子卡片再设grid-template-rows: subgrid - 避免在子卡片层写
@media改自己的grid-template-columns，那它就脱离subgrid语义，变成独立网格
三层嵌套（列表→卡片→内容区）还能对齐顶层网格吗？
可以，但必须每一层都“干净透传”，任何一层加了 gap、auto-fit 或只声明一边（如只写 grid-template-columns: subgrid 却漏掉 grid-template-rows: subgrid），链路就断了：
立即学习“前端免费学习笔记（深入）”；
- 顶层（列表）：定义固定列轨道，如
grid-template-columns: repeat(4, 1fr)，禁用gap（或改用padding模拟） - 中间层（卡片）：必须同时声明
grid-template-columns: subgrid和grid-template-rows: subgrid，且不能设gap，否则生成隐式轨道，孙子层只能对齐它，而非顶层 - 孙子层（内容区）：同样设
grid-template-columns: subgrid，并确保其父（卡片）未引入额外轨道 - 如果某层必须加间距，优先用
padding或margin，而非gap
真正容易被忽略的，是「父网格轨道必须稳定可预测」——subgrid 不是智能适配器，它只做精确复刻。一旦父级用 minmax(250px, 1fr) 配合 auto-fit，浏览器在不同宽度下推演的列数不可控，子层就无法可靠继承。所以移动端响应式里，subgrid 最适合配合明确断点和固定列数组合使用，而不是试图让它扛起全部弹性逻辑。
