如何用CSS Grid高效实现简历时间线奇偶元素分栏布局

当然可以！你完全不用手动给每个事件设置grid-area，用:nth-child(odd)和:nth-child(even)就能轻松实现自动左右排列，而且代码会简洁很多，维护性也更强。下面是具体的优化方案：

核心思路 #

放弃手动定义grid-template-areas，直接通过grid-column属性指定事件的列位置：

• 奇数位置的事件（第1、3、5...个）放在左侧列（第1列）
• 偶数位置的事件（第2、4、6...个）放在右侧列（第3列）
• 中间的时间线元素直接贯穿所有行，不用重复声明位置

优化后的完整代码 #

.timeline {
  display: grid;
  grid-template-columns: 49% 2px auto; /* 保持原列宽比例 */
  grid-auto-rows: 1fr; /* 自动让每行高度相等，适配任意数量的事件 */
  text-align: center;
  gap: 0; /* 可选：消除列之间的默认间隙，让时间线和事件更紧凑 */
}

/* 中间时间线：贯穿所有行 */
.line {
  grid-column: 2;
  grid-row: 1 / -1; /* 从第1行延伸到最后一行 */
  background-color: black !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 奇数事件放在左侧列 */
.timeline > :nth-child(odd) {
  grid-column: 1;
}

/* 偶数事件放在右侧列 */
.timeline > :nth-child(even) {
  grid-column: 3;
}

对应的HTML示例（供测试）：

<div class="timeline">
  <div>事件1：XXX</div>
  <div>事件2：XXX</div>
  <div>事件3：XXX</div>
  <div>事件4：XXX</div>
  <div>事件5：XXX</div>
  <div>事件6：XXX</div>
  <div class="line"></div>
</div>

方案优势 #

1. 代码极简：不用为每个事件单独设置grid-area，仅用两个选择器就完成自动布局
2. 扩展性强：新增事件时完全不用修改CSS，自动按照奇偶规则排列到左右列
3. 灵活适配：grid-auto-rows: 1fr会自动让所有事件行高度相等，不管事件数量多少
4. 结构清晰：放弃繁琐的grid-template-areas命名，逻辑更直观

内容的提问来源于stack exchange，提问作者Grebalb