position: sticky 必须作用于 Grid 直接子元素（如 .toc），因 sticky 锚点依赖最近滚动祖先，Grid 容器自身非滚动上下文；父容器需设 height 或 overflow-y: auto 以提供滚动边界，且子项需 align-self: start 防拉伸偏移。
grid-template-columns 必须配合 position: sticky 子元素使用，否则目录无法真正“吸顶”——整个容器设 sticky 没用，只对直接子项生效。
为什么 position: sticky 加在容器上无效？
Grid 容器本身不是滚动上下文，sticky 的锚点是其最近的**具有滚动行为的祖先容器**（比如 body 或带 overflow-y: auto 的父层）。目录栏要吸顶，必须让它自己成为可粘滞的子项，且父容器需有明确高度约束或滚动上下文。
-
sticky元素必须是 Grid 项目的直接子元素（如.toc和.article），不能套在额外div里 - 父 Grid 容器需设
height: 100vh或包裹在overflow-y: auto的滚动容器中，否则无“滚动边界”触发粘滞 -
top值作用对象是该子项在其网格轨道内的起始位置，不是视口顶部；常见误设top: 0却没效果，其实是被网格行高撑开导致初始偏移
grid-template-areas 与语义化命名更易维护
用 grid-template-areas 显式声明区域比纯列宽计算更直观，尤其当后续要加广告位、推荐栏等扩展模块时。目录和正文的区域名必须严格匹配子元素的 grid-area 值（含引号）。
- 写法必须是多行字符串：
grid-template-areas: "toc main";，单行不换行会解析失败 - 移动端想切为单列，直接在媒体查询里重写整个
grid-template-areas：例如"main" "toc"，而不是只改列宽 - 避免用数字或无意义名（如
a b），改用"toc main"这类可读名，后期交接或调试时能立刻定位
目录栏宽度固定 + 正文自适应的列定义
目录通常内容稳定，适合设最小/最大宽度约束；正文需占满剩余空间，但得防过窄影响阅读。用 minmax() 比单纯 250px 1fr 更健壮。
- 推荐列定义：
grid-template-columns: minmax(240px, 28%) 1fr;—— 目录最小 240px，最大不超 28%，正文始终占剩余全部 - 别用
250px 1fr：小屏下目录硬宽会把正文挤到极窄，文字折行混乱 - 若目录含长文本或嵌套列表，记得给
.toc设overflow-y: auto，否则内容溢出不可滚动
吸顶失效时优先检查这三处
实际项目中 80% 的吸顶失败都源于这三项配置遗漏或冲突：
- 目录项没设
align-self: start—— Grid 默认stretch，会拉伸填满整行高度，导致top计算起点错位 - 父容器没设
display: grid或漏写grid-template-columns，使子项退化为普通块级流，sticky失去网格上下文约束 - 页面根容器（如
body）有margin或未重置scroll-padding-top，造成粘滞后顶部留白或跳动
复杂点在于：吸顶行为依赖滚动容器、网格轨道高度、子项自身尺寸三者联动，任一环节尺寸计算偏差都会让 top 偏移失准。建议先关掉所有动画和过渡，用 DevTools 实时拖动滚动条观察 sticky 触发时机。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
