Grid里怎么定义像Excel那样密密麻麻的行列线
靠grid-template-rows和grid-template-columns手动写几十行1fr不现实，也难维护。真正高效的做法是用repeat()配合minmax()或固定值，再用gap模拟“边框间隙”——注意，不是真的画边框，而是留白+背景色反衬。
-
gap: 1px+ 父容器background: #ccc，子项background: #fff，视觉上就是细边框 - 避免用
border，否则行列交叠处会变粗（2px），破坏Excel感 - 行列数多时，别写
repeat(100, 1fr)，改用repeat(100, minmax(24px, auto))，兼顾内容撑开与最小高度
单元格跨行跨列但边框不断开，怎么保持对齐
Excel里合并单元格后，周围网格线依然连贯。Grid中用grid-row/grid-column合并时，边框断开是因为子项自身border独立绘制。解决方案是放弃单个单元格画边框，全部交给父容器控制。
- 父容器设
display: grid+gap: 1px+background: #d0d0d0 - 所有子项设
background: white，且border: none - 合并单元格时只改
grid-row: 2 / 4这类声明，视觉边框自动由gap和背景色维持连续 - 如果必须用
border（比如导出PDF需精确线宽），得额外加伪元素或绝对定位覆盖交点，复杂度陡增
滚动时表头/首列固定，Grid原生不支持怎么办
Grid本身没有position: sticky的行列级锚点机制，sticky在Grid子项上表现不稳定，尤其在overflow容器里容易失效。
- 表头固定：把表头单独抽成一个
grid容器，和主体grid并列，两者grid-template-columns严格一致，靠JS同步滚动位置 - 首列固定：给首列子项加
position: sticky; left: 0; z-index: 1，但必须确保父容器有overflow: visible且无transform——后者常被忽略，会导致sticky直接失效 - 纯CSS方案目前不存在；想零JS，只能用
display: table回退，但失去Grid响应式优势
IE11兼容Grid细密轨道？别试了
IE11的Grid实现（旧语法）根本不支持repeat()、minmax()、gap，连grid-template-areas都残缺。所谓“兼容”，实际要写两套布局逻辑。
立即学习“前端免费学习笔记（深入）”；
- 检测
@supports (display: grid)，不支持时降级为display: table或Flex模拟 - 细密轨道（如50×30）在IE11里用Flex嵌套模拟，性能极差，滚动卡顿明显
- 如果项目必须支持IE11，建议直接用现成表格库（如Handsontable），自己用Grid硬刚等于重造轮子还漏气
Grid做Excel式布局的核心矛盾在于：视觉“线”靠gap最干净，但滚动固定和IE兼容这两块，没折中方案，要么妥协体验，要么放弃旧环境。
