Grid容器需设max-height和overflow-y: auto以激活sticky；表头须grid-column: 1 / -1，首列须grid-row: 1 / -1；须显式设top/left、分层z-index，禁用transform/filter；列宽须显式统一，禁用原生table套grid。
Grid容器必须设max-height + overflow-y: auto才能激活sticky
直接给表头或首列加position: sticky却没反应，基本是因为Grid容器没创建滚动上下文。Sticky依赖最近的、可滚动的祖先，而这个祖先就是Grid容器自己——但它必须同时满足两个硬条件：max-height（或height）+ overflow-y: auto。
常见错误：
-
.grid { display: grid; }→ 没高度、没overflow，sticky彻底失效 - 用
height: 100%但父级没高度，结果还是撑不满 → 改用max-height: 60vh更稳 - 写
overflow: scroll会强制显示滚动条，干扰UX；overflow-y: auto是更合理的选择
表头必须用grid-column: 1 / -1，首列必须用grid-row: 1 / -1
Grid中能稳定sticky的，只有那些跨满整行或整列的元素。表头若只占某几列（如grid-column: 2 / 4），会被轨道对齐逻辑干扰，导致偏移甚至失效；同理，首列若没跨满所有数据行，滚动时会提前“断开”。
实操要点：
立即学习“前端免费学习笔记（深入）”；
- 表头行（如
.thead）必须设grid-column: 1 / -1，确保横跨全部列 - 首列单元格（如每行第一个
.sticky-col）必须设grid-row: 1 / -1，且不能被grid-auto-rows意外截断 - 所有表头和首列元素都要显式设
top: 0或left: 0，不能依赖默认值 - 避免把表头和首列混在同一个
grid-row里，否则网格自动布局可能破坏粘性触发区
z-index必须分层设置，且不能被transform/filter干扰
左上角单元格（表头+首列交汇处）常被盖住，不是z-index数值不够大，而是层叠上下文被意外切断。一旦祖先元素加了transform、filter或will-change，就会创建新层叠上下文，让子元素的z-index失效。
正确做法：
- 表头设
z-index: 10，首列设z-index: 11，左上角交汇单元格设z-index: 12 - Grid容器及其所有祖先都不能有
transform、filter、overflow: hidden - Tailwind用户尤其注意：
overflow-hidden类会悄悄让sticky退化为static
