css grid 本身不适合构建真正的层级树状图，因其是二维坐标系统而非嵌套关系模型，不识别父子层级，无法自动继承位置或支持递归缩进、连接线、展开折叠等动态需求；但可用于静态多级缩进布局，如三阶菜单，通过 grid-template-columns 控制缩进、grid-column 显式定位实现。
直接说结论：CSS Grid 本身不适合构建真正的层级树状图（比如带缩进、连线、动态展开/折叠的组织结构图），它缺乏对父子深度关系的原生表达能力；但可以用 Grid 搭建扁平化、固定层级的“类树状”布局，比如三阶菜单、静态部门架构图——关键在用 grid-template-columns 控制缩进，用 grid-column 显式定位子项。
为什么不能直接用 Grid 做动态树状图？
Grid 是二维坐标系统，不是嵌套关系模型。它不识别 HTML 的父子层级，grid-column: 2 / 3 和 grid-row: 4 只是把元素“扔”到某个格子，不会自动继承父节点位置或影响子节点排布。真实树状图需要：
- 递归缩进（每深一层增加 left padding 或 margin-left）
- 连接线（常靠伪元素
::before/::after或 SVG 绘制） - 展开/折叠状态切换（需 JS 控制 class + 过渡动画）
- 响应式重排（比如移动端收起子级，只显示根节点）
这些都不是 Grid 的职责范围。强行用 Grid 模拟，会很快陷入 grid-column: 3 / 4、grid-column: 4 / 5 的硬编码泥潭，不可维护。
用 Grid 实现静态多级缩进布局的关键写法
如果你只需要展示一个已知深度（比如最多三级）、不交互的树状结构（如文档大纲、权限配置面板），Grid 可以简洁实现缩进对齐：
- 给容器设
display: grid，并定义足够宽的列轨道，例如grid-template-columns: 1fr 2fr 3fr 4fr—— 每列宽度递增，自然形成缩进感 - 每个节点用
grid-column: span N占据对应列数，N 越大缩进越深 - 用
grid-row控制垂直顺序，避免依赖 DOM 顺序 - 配合
gap: 0.5rem统一间距，比手动设margin-left更稳定
示例：
.tree-grid {
display: grid;
grid-template-columns: 1fr 1.5fr 2fr 2.5fr;
gap: 0.5rem;
}
.node-level-1 { grid-column: 1 / 2; }
.node-level-2 { grid-column: 2 / 3; }
.node-level-3 { grid-column: 3 / 4; }
真正需要动态树状图时，该换什么技术栈？
别硬扛 Grid，优先组合使用：
-
HTML + CSS（基础结构）：保持语义化嵌套（
<ul><li><ul></ul></li></ul>），用padding-left或margin-inline-start控制缩进 -
CSS 伪元素：用
::before绘制竖线和横线，配合position: absolute定位连接点 -
JS 驱动状态：监听点击，切换
data-expanded属性，用max-height+overflow: hidden做折叠动画 -
可选增强：用
transform: scaleY()替代 height 动画更平滑；用prefers-reduced-motion降级过渡
Grid 在这里只适合做局部：比如树状图右侧的操作栏、节点详情面板等固定区域的排版，而非整棵树。
最易被忽略的一点：树状图的“自适应”往往不是指列数随屏幕变，而是指缩进层级能否在小屏下自动压平（比如三级变两级）、连接线是否折断、文字是否换行溢出——这些必须靠媒体查询 + padding 调整 + white-space: normal 组合控制，Grid 的 auto-fit 对此完全无效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
