grid-auto-rows 对目录索引布局几乎无用，因其仅控制隐式网格行高，无法处理嵌套层级、缩进、折叠、锚点跳转等语义与交互需求；真正实现需 HTML 结构 + CSS 布局 + JS 逻辑协同。
直接用 grid-auto-rows 无法实现“目录索引布局”——它只管隐式行高，不管内容结构、层级或语义；真要做出带缩进、折叠、锚点跳转的目录，得靠 HTML + JS 配合 CSS，grid-auto-rows 最多只负责撑开容器里的行轨道。
为什么 grid-auto-rows 对目录布局几乎没用
目录索引本质是嵌套树形结构（如 h2 → h3 → h4），而 Grid 是二维轨道系统，不理解层级关系。你设了 grid-auto-rows: minmax(1.5rem, auto)，它只会让每新增一行“自动创建的网格行”有最小高度，但：
- 不会自动识别
<h2></h2>和<h3></h3>的嵌套关系 - 不会给子项加缩进、符号或折叠箭头
- 不会响应点击展开/收起，那得靠 JS 控制
display或max-height - 不会生成锚点链接（
#section-2）或滚动定位逻辑
真正该用 grid-auto-rows 的地方：纯卡片列表的等高行
如果你说的“目录”其实是平铺的标题卡片（比如文档侧边栏里一堆 <li> 标题项，无嵌套，仅需视觉对齐），那 grid-auto-rows 才有用武之地：
- 适用场景：
display: grid容器内放 N 个<article class="toc-item"></article>，每个含标题+简短描述 - 正确写法：
grid-auto-rows: minmax(3rem, auto)，防塌陷且容得下两行文字 - 必须配合：
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr))实现响应式换行 - 关键约束：所有
.toc-item必须设height: 100%且内部用flex column布局，否则拉伸失效
目录索引该怎么做：Grid 只配当容器壳
把 Grid 当“架子”，里面塞真实目录逻辑：
立即学习“前端免费学习笔记（深入）”；
- HTML 结构保持语义化：
<nav aria-label="Table of contents"><ol><li><a href="#intro">Introduction</a></li></ol></nav> - CSS 用 Grid 控制外层排列（比如三列目录项），但每项内部用
display: flex+padding-left模拟缩进 - JS 处理折叠：监听点击，切换
aria-expanded和max-height过渡 - 锚点滚动：用
scrollIntoView({ behavior: 'smooth' })替代手动计算 offsetTop - 别在
grid-auto-rows上浪费时间做层级判断——浏览器不支持，也没标准定义“第几级标题该占几行”
最常被忽略的一点：目录的“自动生成”靠的是 JS 解析 DOM 标题节点并构建树，不是靠 CSS 属性推导出来的。Grid 能做的，只是让生成后的每一行在视觉上整齐一点。
