如何将奇数元素放在特定列的所有行上的偶数元素中，并将偶数元素放在另一列上？

Question

因此，我正在尝试使用CSS为我的在线简历创建时间轴。我的计划是制作一个具有两个基本列和一个第三列的网格，以用于线条及其样式。我想将所有其他元素放置在该行的右侧（网格的第三列）。有没有办法使用:nth-child(odd)或类似的方法来实现这一目标？我当然可以使用grid-area，但我不想将每个元素都单独放置。

这是我当前的网格：

.timeline {
  display: grid;
  grid-template-columns: 49% 2px auto;
  grid-template-rows: repeat(5, 1fr);
  grid-template-areas:
      "event1 line . "
      " . line event2"
      "event3 line . "
      " . line event4"
      "event5 line . "
      " . line event6";
  text-align: center;
}

.line {
  grid-area: line;
  background-color: black !important;
  margin: 0 !important;
  padding: 0 !important;
}

.timeline :nth-child(2) {
  grid-area: event1;
}

.timeline :nth-child(3) {
  grid-area: event2;
}

.timeline :nth-child(4) {
  grid-area: event3;
}

.timeline :nth-child(5) {
  grid-area: event4;
}

.timeline :nth-child(6) {
  grid-area: event5;
}

.timeline :nth-child(7) {
  grid-area: event6;
}

它可以工作，但是必须有一种更有效的方法。

Answer 1

如果我正确理解您想要的内容，则可以使用nth-child设置.line和.event的列开头。但是，这会产生孔，因此您还需要在grid-auto-flow: row dense;上设置.grid。该行应填充两列，因此对于每种情况，您需要将背景移到正确的位置。

:root {
  --line-width: 10px;
}

.timeline {
  display: grid;
  grid-template-columns: 1fr var(--line-width) 1fr;
  grid-auto-flow: row dense;
  text-align: center;
}

.line {
  grid-column-start: 2;
  grid-column-end: span 2;
  background: linear-gradient(black, black) no-repeat;
  background-size: var(--line-width) 2px;
  background-position: center left;
}

.line:nth-child(4n + 4) {
  grid-column-start: 1;
  background-position: center right;
}

.event {
  grid-column-start: 1;
}

.event:nth-child(4n + 3) {
  grid-column: 3;
}

<div class="timeline">
  <div class="event">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dui elit, tincidunt sit amet dictum ut, tempus vel diam. Integer ac sem congue, ullamcorper libero sit amet, viverra dui.</div>
  <div class="line"></div>
  <div class="event">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dui elit, tincidunt sit amet dictum ut, tempus vel diam. Integer ac sem congue, ullamcorper libero sit amet, viverra dui.</div>
  <div class="line"></div>
  <div class="event">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dui elit, tincidunt sit amet dictum ut, tempus vel diam. Integer ac sem congue, ullamcorper libero sit amet, viverra dui.</div>
  <div class="line"></div>
  <div class="event">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dui elit, tincidunt sit amet dictum ut, tempus vel diam. Integer ac sem congue, ullamcorper libero sit amet, viverra dui.</div>
  <div class="line"></div>
  <div class="event">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dui elit, tincidunt sit amet dictum ut, tempus vel diam. Integer ac sem congue, ullamcorper libero sit amet, viverra dui.</div>
  <div class="line"></div>
  <div class="event">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dui elit, tincidunt sit amet dictum ut, tempus vel diam. Integer ac sem congue, ullamcorper libero sit amet, viverra dui.</div>
  <div class="line"></div>
  <div class="event">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dui elit, tincidunt sit amet dictum ut, tempus vel diam. Integer ac sem congue, ullamcorper libero sit amet, viverra dui.</div>
  <div class="line"></div>
  <div class="event">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dui elit, tincidunt sit amet dictum ut, tempus vel diam. Integer ac sem congue, ullamcorper libero sit amet, viverra dui.</div>
  <div class="line"></div>
</div>