Subgrid 缩进对齐需三层结构严丝合缝：.comment-list 显式定义列轨道，子项必须为真实直接子元素，每层均声明 display: grid + grid-template-columns: subgrid + grid-column: 1 / -1。
Subgrid 不能直接“统一缩进线”，它只负责继承父网格的轨道线；评论缩进线对齐的前提是：所有层级的评论容器都必须严格共享同一套列轨道，且中间不能有隐式轨道插入。
为什么 grid-template-columns: subgrid 没让缩进对齐
常见错误是只在最外层列表设了 grid-template-columns，但子级评论项（如 .comment-reply）不是它的直接子元素——中间夹了 <div class="replies"> 或用了 <code>display: contents 包裹层。
- 浏览器看到
.comment-reply不是.comment-list的真实 DOM 直接子项，直接丢弃grid-template-columns: subgrid声明（开发者工具里grid-template-columns计算值为none） - 父容器用了
grid-auto-columns: 1fr或repeat(auto-fit, ...)→ 没有显式列定义，subgrid 无轨道可继承 - 子容器写了
display: grid却漏掉grid-template-columns: subgrid，仅靠grid-column定位无法触发继承
缩进线对齐必须满足的三层结构
要让一级评论、二级回复、三级嵌套都落在同一组垂直线上，需逐层确保轨道链不断：
-
.comment-list必须显式定义列轨道，例如：grid-template-columns: [avatar] 48px [indent] 16px [content] 1fr（不能用auto-fit或grid-auto-columns） -
.comment-item和.comment-reply都必须是.comment-list的**真实直接子元素**（即 HTML 中没有 wrapper div） - 每层子容器都要声明：
display: grid+grid-template-columns: subgrid+grid-column: 1 / -1（显式占满整行，防止隐式列插入）
如何用命名线控制不同层级的缩进偏移
缩进不是靠 margin 或 padding，而是靠复用父级列线编号或命名线。例如：
立即学习“前端免费学习笔记（深入）”；
.comment-list {
display: grid;
grid-template-columns: [level-0] 1fr [level-1] 1fr [level-2] 1fr;
}
.comment-item { grid-column: level-0; }
.comment-reply {
grid-column: level-1;
display: grid;
grid-template-columns: subgrid;
}
这样，所有 .comment-reply 都自动对齐到第二列起始线，视觉缩进一致；若某条回复下还有子回复，它也必须是 .comment-list 的直接子项，并设 grid-column: level-2 —— subgrid 不支持“穿透两层”继承，孙子级必须由父级显式接入。
响应式缩进变化时最容易断链的地方
想在移动端把缩进从 3 级压成 2 级，不能在 .comment-reply 上写媒体查询改 grid-template-columns，这会立即切断继承。
- 正确做法：只在
.comment-list上用媒体查询切换列定义，例如@media (max-width: 768px) { grid-template-columns: [level-0] 1fr [level-1] 1fr; } - 错误做法：给
.comment-reply加@media (max-width: 768px) { grid-template-columns: subgrid; }—— 浏览器发现父级此时没定义列轨道，直接忽略 - 额外注意：如果用了
gap，子容器必须用grid-column: 1 / -1显式撑满，否则 gap 会插入隐式列，导致后续所有命名线偏移
真正难的不是写 subgrid，而是让 DOM 结构和 CSS 声明严丝合缝地配合——少一个 grid-column，多一层 wrapper，或者错用一次 auto-fit，缩进线就立刻错位，且没有任何报错提示。
