Grid时间轴应以<ol class="timeline">包裹<li>，每项含<time>和.content；CSS用三列网格（1fr minmax(0,400px) 1fr），<li>通过nth-child跨列定位，移动端退化为单列并重置grid-column:1，禁用justify-self改用text-align或position控制时间点对齐。
Grid时间轴的结构怎么搭才不翻车
直接用 display: grid 做时间轴，最常犯的错是把「时间点」和「内容块」强行塞进同一行网格——结果在小屏下堆叠错乱、对齐失效。核心原则：时间轴本质是「垂直流 + 横向交替」，Grid 要按「行」划分语义，而不是按「项目」硬排。
推荐结构：<ol class="timeline"> 包裹多个 <li>，每个 <li> 内含 <time> 和 <div class="content">。Grid 控制的是 <li> 的排列方式，不是内部元素。
关键 CSS：
.timeline {
display: grid;
grid-template-columns: 1fr minmax(0, 400px) 1fr;
gap: 1.5rem;
}
<p>.timeline > li {
grid-column: 2; /<em> 所有内容默认居中列 </em>/
}</p><p>.timeline > li:nth-child(odd) {
grid-column-start: 1; /<em> 奇数项左偏 </em>/
}</p><p>.timeline > li:nth-child(even) {
grid-column-start: 3; /<em> 偶数项右偏 </em>/
}移动端断点里为什么 grid-template-columns 不能只写 1fr
小屏下如果还保留三列布局，minmax(0, 400px) 会撑开容器，导致横向滚动或文字溢出。但直接改成 1fr 又会让所有 <li> 挤在中间一列，失去交替效果。
立即学习“前端免费学习笔记（深入）”；
正确做法是切换为单列流，并用 grid-auto-flow: row（默认值）+ 显式重置列定位：
- 用
@media (max-width: 768px)覆盖原 grid 定义 - 设
grid-template-columns: 1fr，同时清除grid-column-start的干扰：给.timeline > li加grid-column: 1 - 加
align-items: start防止时间戳因基线对齐偏移
否则你会看到时间点悬浮在内容上方、左右不对齐，尤其当内容高度不一时。
时间点（<time>）的定位为什么别用 justify-self
justify-self: start/end 看似能控制时间点左右贴边，但实际在 Grid 中它只作用于**网格项自身**，而 <time> 是 <li> 的子元素，不在 Grid 容器直管范围内。强行用会导致时间点相对父 <li> 错位，且在不同列中行为不一致。
更稳的方案：
- 把
<time>设为position: relative - 在奇数项里加
left: 0，偶数项加right: 0（配合transform: translateX()微调） - 或者统一用
text-align: right/text-align: left配合grid-column控制所在列
否则调试时你会发现时间点在 iPad 和 Chrome DevTools 模拟器里位置不一样——这是 justify-self 在隐式网格线中的计算差异导致的。
IE11 兼容性问题要不要处理
IE11 对 grid-column: span 2、minmax()、nth-child(odd/even) 支持极差，且无法回退到 Flex 布局自动对齐。如果项目必须兼容 IE11，别用 Grid 做时间轴。
可行替代：
- 用
float: left/right+clear: both模拟交替（需额外 wrapper 控制清除逻辑） - 改用 Flex +
flex-direction: column，靠margin-left/margin-right手动推偏（维护成本高） - 引入 css-grid-polyfill，但仅支持静态布局，动态插入项会失效
真正麻烦的不是写法，而是时间轴常伴随 JS 动态渲染（比如加载更多），这时候 Polyfill 的重绘 bug 会让你花半天时间 debug 动画卡顿。
