Grid布局中sticky冻结表头失效，因容器默认overflow:visible且未创建BFC，需显式设置grid容器height和overflow-y:auto；多列冻结需嵌套Grid+独立滚动容器；IE等旧浏览器需用transform模拟。
冻结表头时 sticky 不生效？检查 grid 容器的 overflow 和 scroll 作用对象
直接给 thead 或表头行加 position: sticky 在 Grid 布局里大概率失效，根本原因是：sticky 依赖最近的「具有滚动约束」的祖先容器。而 Grid 容器默认是 overflow: visible，不会创建新的块级格式化上下文（BFC），导致 sticky “找不到”可依附的滚动边界。
必须显式设置 Grid 容器（通常是包裹整个表格的 <div>）为 overflow: auto 或 scroll，且该容器需有明确高度（如 height: 400px）。否则浏览器无法判断“滚动到哪算‘粘住’”。
- 错误写法：
display: grid的父容器没设height+overflow - 正确写法：Grid 容器本身设
height: 500px; overflow-y: auto - 注意：不要在
tbody或tr上设overflow——它们不是 sticky 的滚动容器
用 grid-area 定位表头区域？别硬套，grid-area 不控制 sticky 行为
grid-area 是用于命名/定位网格项在显式网格中的位置，和 sticky 的行为完全无关。试图用 grid-area: header / 1 / -1 / 2 这类写法“撑开”表头高度或绑定粘性逻辑，只会让布局错乱，对冻结毫无帮助。
真正需要的是结构分离 + 层级控制：
立即学习“前端免费学习笔记（深入）”；
- 把表头（
thead）和内容（tbody）作为两个独立的 Grid 子项，而非塞进同一个table元素里 - 用
display: contents或直接不用table标签，改用div模拟行列，避免原生 table 对 Grid 的干扰 - 表头行自身设
position: sticky; top: 0; z-index: 1，确保它浮在滚动内容之上
多列冻结（如首列固定）怎么配合 sticky？必须用嵌套 Grid + 独立 scroll 容器
Excel 式的“首行+首列同时冻结”，单靠一个 sticky 无法实现。因为 sticky 只响应一个方向（top 或 left），而首列冻结要求水平滚动时列不动，这需要另一个独立的滚动上下文。
可行方案是双层嵌套：
- 外层 Grid：负责整体布局，划分“固定列区”和“可滚动内容区”
- 内层 Grid（或 flex）：在“可滚动内容区”中再设
overflow-x: auto，并让其子项（数据列）使用position: sticky; left: 0 - 固定列本身不参与内层滚动，只在外层占据固定
grid-column轨道
示例关键 CSS：
.grid-container {
display: grid;
grid-template-columns: 120px 1fr;
height: 400px;
}
.fixed-col {
position: sticky;
left: 0;
z-index: 2;
}
.scrollable-area {
overflow-x: auto;
overflow-y: hidden;
}
IE 或旧版 Safari 不支持 sticky？Grid + transform 滚动模拟是唯一退路
position: sticky 在 IE 完全不支持，iOS Safari top 值。一旦遇到，别挣扎——Grid 本身无法替代 sticky 的滚动感知能力。
能用的降级方案只有 JavaScript 驱动的滚动监听 + transform: translateY() 动态调整表头位置：
- 监听容器
scroll事件，读取scrollTop - 用
requestAnimationFrame更新表头的transform，模拟粘性位移 - 注意性能：避免在滚动中频繁操作 DOM，优先用
will-change: transform提升图层
这不是“用 CSS Grid 实现”，而是用 Grid 做结构、用 JS 补行为——这点容易被忽略，但生产环境必须面对。
