应锁定日期列宽、用相对定位容器配合绝对定位伪元素画线，并为ie11降级flex布局；因fr单位致列宽不均、row-gap语义错位、absolute脱离网格流、ie11不支持span跨列。
grid-template-columns 里用 fr 单位会导致日期列宽度不固定
日期列如果用 1fr，浏览器会按内容撑开后重新分配剩余空间，结果就是不同行的日期宽度不一致，网格线自然就歪了。真正要的是「等宽列 + 内容居中对齐」，不是弹性伸缩。
实操建议：
• 左侧日期列用固定宽度（比如 120px）或 minmax(120px, 120px) 锁死
• 右侧事件列用 1fr 占满剩余空间
• 整体设 grid-template-columns: 120px 1fr
• 配合 justify-items: center 让日期文字在列内居中，视觉上更稳
grid-row-gap 不能替代语义化的垂直间距控制
只靠 grid-row-gap 拉开时间点之间的距离，容易让「同一事件的多段描述」被错误隔开，或者导致首尾节点贴边难看。它只是网格线之间的空隙，不是逻辑分组间距。
实操建议：
• 每个时间点用一个 <li> 或 <div class="timeline-item"> 包裹完整内容<br>• 在该容器内部用 <code>margin-bottom 控制事件块间距（比如 margin-bottom: 2rem）
• grid-row-gap 设为 0，避免和 margin 叠加出意外空白
• 这样既保持网格结构干净，又保留语义化间距控制权
立即学习“前端免费学习笔记（深入）”；
伪元素画竖线时 position: absolute 会脱离网格流
很多方案用 ::before 画左侧贯穿竖线，但如果父容器没设 position: relative，或者伪元素用了 position: absolute 且未配 top/left，线条就会飘到页面左上角，或者被其他元素遮挡。
实操建议：
• 给时间轴外层容器（如 <ol class="timeline"></ol>）加 position: relative
• 伪元素用 position: absolute + left: calc(120px / 2) 对齐日期列中心（假设日期列宽 120px）
• 高度用 height: 100% 并确保父容器有明确高度（必要时设 min-height: 100vh）
• 不要用 transform: translateY() 微调位置——它会让线条在滚动时模糊或错位
IE11 下 grid-column: span 2 会失效
想让某个事件横跨两列（比如合并日期+内容区），在 IE11 里写 grid-column: span 2 直接不生效，整行塌缩成一列。这不是 bug，是 IE 对 Grid 规范支持不全的硬伤。
实操建议：
• 放弃在 IE11 中实现「跨列事件」，改用降级布局：日期作为 <span></span> 插入事件文本前，用 display: inline-block 和固定宽模拟对齐
• 或者整个时间轴用 display: flex + flex-direction: column 实现，日期用 margin-left 手动偏移
• 真要保 Grid，就得加 js 检测 css.supports('display', 'grid')，不支持时动态切布局
对齐这事，本质是「列宽锁定 + 容器定位 + 伪元素锚点」三者咬死。少一个，线就偏；在老浏览器里，Grid 的语义优势反而会变成兼容包袱。