CSS Grid 实现左右交替时间轴的关键是用 grid-template-columns 定义两列布局，并通过 :nth-child(odd/even) 配合 grid-column 控制奇偶项列位置；竖线用 ::before + grid-row: 1 / -1 实现跨行居中；响应式需在媒体查询中重置 grid-template-columns 和 grid-column: auto。
CSS Grid 实现左右交替时间轴，关键不是靠 float 或绝对定位，而是用 grid-template-columns 配合 nth-child 控制每一项的列起始位置——这样既响应式友好，又无需 JS 干预顺序。
用 grid-column + :nth-child(odd/even) 控制左右落位
左右交替的本质是让第 1、3、5… 项靠右（比如放在第 2 列），第 2、4、6… 项靠左（放在第 1 列）。Grid 天然支持这种显式列定位：
- 给容器设
display: grid和两列布局：grid-template-columns: 1fr 1fr - 每项默认占满一行两列，再用
grid-column覆盖其列范围 -
.timeline-item:nth-child(odd) { grid-column: 2 / -1; }→ 奇数项从第 2 列开始，延伸到隐式最后一列（即右侧） -
.timeline-item:nth-child(even) { grid-column: 1 / 2; }→ 偶数项只占第 1 列（左侧）
注意：这里用 -1 表示末尾线，比写死 3 更健壮；若想严格限制为两列，也可统一用 1 / 2 和 2 / 3。
时间线竖线用 ::before 伪元素 + place-self 居中对齐
竖线不该是额外 DOM 元素，否则破坏语义和可访问性。直接在每个 .timeline-item 上画一条垂直线更干净：
- 给
.timeline-item设position: relative，然后::before绝对定位画线 - 更推荐 Grid 内部居中法：设
.timeline-item { display: grid; place-items: center; }，再让::before成为子项，grid-row: 1 / -1拉满高度 - 关键点：竖线需跨所有行，所以必须脱离文本流或用
grid-row: 1 / -1，否则会被内容高度截断
示例片段：.timeline-item::before { content: ""; width: 2px; background: #ccc; grid-row: 1 / -1; }
响应式坍缩成单列时，grid-template-columns 必须重置
小屏下左右交替失去意义，必须收为一列——但很多人只改了 grid-template-columns，忘了清除 grid-column 的强制列定位，导致内容错位：
- 媒体查询内重置：
@media (max-width: 768px) { .timeline { grid-template-columns: 1fr; } .timeline-item { grid-column: auto; } } -
grid-column: auto是关键，它撤销之前1 / 2或2 / -1的显式声明 - 若用
grid-column: 1 / -1代替auto，也能强制占满，但语义稍弱
不重置 grid-column 是最常被忽略的兼容性坑——PC 正常，手机上某几项会消失或挤在角落。
真正难的不是写出左右交替，而是确保奇偶项在不同屏幕宽度下都落在预期列、竖线始终贯穿、文字不溢出且可读。这些细节全靠 grid-column 的显式控制和媒体查询中的精准重置，少一步都会漏掉一整块视觉逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
