响应式时间轴核心是网格列数与顺序控制：小屏单列（1fr），大屏双列（1fr 1fr），用order和grid-column显式分配时间点与内容，禁用grid-row-start，以gap统一间距。
用 grid-template-columns 控制两列布局的断点切换
响应式时间轴的核心不是“画线”或“加动画”，而是让时间项在小屏竖排、大屏左右分栏——关键在网格列数和顺序控制。默认用 grid-template-columns: 1fr（单列），到平板以上切为 grid-template-columns: 1fr 1fr，但直接这么写会导致内容按 DOM 顺序从左到右填满，时间线就乱了。
实操建议：
- 给每个时间项包裹一个
<li>或<article></article>，统一设display: contents（避免额外盒模型干扰） - 父容器用
display: grid，小屏下靠grid-auto-flow: row保证垂直堆叠 - 大屏用
@media (min-width: 768px)覆盖列定义，并配合grid-column显式指定每项落哪一列 - 别依赖
grid-auto-flow: column—— 它不保证时间先后顺序，尤其当项高不一致时容易错位
用 order 配合媒体查询调整时间项视觉顺序
两列布局里，常见需求是“左边放时间点，右边放内容”，但 HTML 结构通常把时间点和内容写在同一个容器里。这时候不能靠 DOM 顺序，得靠 order 拉开它们。
常见错误现象：小屏下时间点和内容挤在一起，大屏却上下错位，或者右侧内容跑到了左侧时间点前面。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 每个时间项内部拆成两个子元素：
<time></time>和<div class="content"> <li>小屏下都设 <code>order: 0，保持自然流 - 大屏下给
<time></time>设order: -1，再用grid-column: 1锁死左列；.content设grid-column: 2，不改order - 注意：如果用了
display: contents父容器，order必须作用在直系子元素上，否则无效 - 完全放弃
grid-row-start/grid-row-end手动定位 - 用
grid-auto-rows: minmax(100px, auto)让每行有弹性高度 - 如果需要时间点图标对齐，改用
align-items: start+justify-content: center控制单个项内布局 - 兼容性提醒：IE 不支持
minmax()，如需支持 IE，改用固定高度 +overflow: hidden，但会牺牲内容完整性 - 优先用
border-left或border-right在列容器上画主轴线，稳定且无渲染开销 - 如果必须用伪元素（比如带箭头的斜线），确保其父元素设
position: relative，且伪元素尺寸用em或rem，不用px - 不要在
@media里重复定义伪元素的top/left，改用transform: translateY()微调，更利于 GPU 加速 - 复杂时间轴（比如带分支、折叠节点）建议改用 SVG 绘制主线，CSS 只管文字和交互态
避免 grid-row-start 硬编码导致的响应式断裂
有人会想用 grid-row-start: 1 把所有时间点钉在第一行，结果小屏下全叠一起，大屏又因高度差异互相覆盖。这不是网格问题，是误把时间轴当表格处理了。
使用场景：时间项内容长度不可控（比如有的带图片，有的只有一句话）
实操建议：
用伪元素画连接线时，position: absolute 和 grid-area 的取舍
时间轴的竖线/斜线不是必须用伪元素，但多数人这么干后发现：小屏线断了、大屏线偏移、缩放后虚线错位。根本原因是伪元素脱离文档流后，坐标参照系混乱。
性能影响：大量 ::before/::after 加 transform 动画会触发重排，尤其在低端安卓机上卡顿明显。
实操建议：
最易被忽略的是：时间项之间的垂直间距在不同屏幕下要靠 gap 控制，而不是 margin。一旦用了 margin，它会在网格项外生效，导致小屏堆叠时留白异常，大屏又因为列宽变化让间隙忽大忽小。直接写 gap: 2rem 并在媒体查询里覆盖数值，才是稳的。
