CSS Grid实现时间线布局存在多余空白问题求助

问题核心是你手动给每个section和.date指定了固定的grid-row跨度（比如.green {grid-row:1/3}），但这些元素实际高度不需要跨两行，网格为了满足你指定的跨度，会自动创建空行，这就是多余空白的来源。grid-auto-rows无法覆盖手动指定的行跨度设置，所以不管怎么调都没用。

修复方案 #

1. 移除所有手动设置的grid-row规则，让CSS Grid自动根据元素高度生成行
2. 调整元素间距逻辑，用外边距替代原有的网格行间隙依赖
3. 保留原有的交错布局和时间线视觉样式

修改后的代码 #

CSS

* {
  margin: 0;
  font-family: "Ubuntu", sans-serif;
  box-sizing: border-box;
}

:root {
  font-size: 1px;
}

body {
  font-size: 16rem;
}

.wrapper {
  --border-width: 0.5em;
  --gap: 8rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--gap);
  padding: 0.5em;
  align-items: start;
}

h2 {
  grid-column: 1/2;
  font-size: 2em;
  margin-bottom: var(--gap);
}

section {
  position: relative;
  text-align: justify;
  border-top: var(--border-width) solid var(--accent);
  border-bottom: var(--border-width) solid transparent;
  padding: 0 0.5em;
  max-width: 60ch;
  margin-bottom: var(--gap);
}

section::after {
  content: "";
  display: block;
  height: var(--border-width);
  width: calc(var(--border-width) + var(--gap));
  background-color: var(--accent);
  position: absolute;
  top: calc(-1 * var(--border-width));
  z-index: -1;
}

section:nth-of-type(odd) {
  grid-column: 3/4;
  border-right: var(--border-width) solid var(--accent);
  border-top-right-radius: 1em;
}

section:nth-of-type(odd)::after {
  left: 0;
  translate: -100%;
}

section:nth-of-type(even) {
  grid-column: 1/2;
  justify-self: end;
  border-left: var(--border-width) solid var(--accent);
  border-top-left-radius: 1em;
}

section:nth-of-type(even)::after {
  right: 0;
  translate: 100%;
}

.date {
  grid-column: 2/3;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  font-size: 12rem;
  padding: 0.6em 0.3em;
  line-height: 0.7em;
  background-color: var(--accent);
  color: white;
  margin-bottom: var(--gap);
}

.date:nth-of-type(odd) {
  border-radius: 1em 0 1em 0;
}

.date:nth-of-type(even) {
  border-radius: 0 1em 0 1em;
}

.date>* {
  flex-basis: 100%;
}

.green { --accent: hsl(171, 67%, 28%); }
.orange { --accent: hsl(22, 99%, 50%); }
.yellow { --accent: hsl(46, 100%, 47%); }
.pink { --accent: hsl(343, 78%, 62%); }
.blue { --accent: hsl(192deg 80% 48%); }

HTML

<div class="wrapper">
  <h2>Lorem Ipsum</h2>

  <section class="green">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus quidem qui, aliquid asperiores commodi officiis inventore laboriosam dignissimos dolor officia id itaque tempora provident exercitationem accusamus expedita ullam dolorum fuga. Officiis temporibus porro nesciunt libero, eum aliquid doloremque minima nisi sint minus id mollitia ea quisquam consequuntur laudantium autem. Aperiam.
  </section>
  <p class="green date"><span>03/2022</span>-<span>04/2023</span></p>

  <section class="orange">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, quisquam atque. Dolores beatae, nisi, laborum perspiciatis architecto non dolorem quae, doloribus aliquam quaerat rem? Esse hic illum sint mollitia quibusdam repellendus totam dolorum voluptatem ipsa, nobis sapiente. Quasi quo porro aperiam cumque nobis debitis praesentium dolorem omnis repellat saepe. Incidunt laudantium at similique nobis perferendis et illo dolor aliquid nisi voluptatum eaque ab accusamus maxime possimus, ut ratione soluta nam, natus quibusdam illum! Qui modi cum libero odit blanditiis distinctio eveniet illo facilis alias, aut neque perspiciatis et ipsam, hic natus? Explicabo consequuntur voluptatibus a ipsam voluptatem, deleniti at doloribus!
  </section>
  <p class="orange date"><span>12/2020</span>-<span>02/2022</span></p>

  <section class="yellow">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius, aliquam blanditiis! Magnam dolorem nostrum molestias modi, ratione id quaerat adipisci dolore impedit quas voluptate recusandae nisi deleniti sed, doloremque ullam ducimus. Voluptatem aut praesentium magni iusto blanditiis? Doloremque, maxime necessitatibus eaque obcaecati voluptate cumque veritatis exercitationem, dolor ex beatae blanditiis.
  </section>
  <p class="yellow date"><span>11/2018</span>-<span>10/2020</span></p>

  <section class="pink">
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perferendis blanditiis repellat nulla iste illo quos, culpa sint nihil doloribus quae molestiae eaque perspiciatis reiciendis exercitationem eum minima molestias voluptatum consequatur quisquam asperiores obcaecati? Quas animi quis itaque molestias praesentium maiores minima. Consequuntur hic explicabo eos expedita quidem, dolorum maiores perferendis, illum quod, placeat magni! Exercitationem architecto iusto deserunt magni possimus.
  </section>
  <p class="pink date"><span>01/2018</span>-<span>11/2018</span></p>

  <section class="blue">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur minima illum, accusamus recusandae eveniet blanditiis repellendus quaerat ullam inventore eaque? Doloremque delectus quibusdam rem hic! Modi ducimus iusto perspiciatis incidunt quidem cum, optio, soluta id voluptatum placeat nobis quasi maxime dolorem magni pariatur cumque illum odio dolor. Dolor libero sint ea iste, autem rerum cupiditate enim aliquam? Cumque voluptatum at dolore. Veritatis, assumenda autem. Culpa facilis dolorum molestias voluptatum, natus, fugit fuga amet veritatis, dicta similique suscipit temporibus porro tempora?
  </section>
  <p class="blue date"><span>07/2014</span>-<span>07/2017</span></p>
</div>

说明 #

• 移除了所有固定的grid-row设置，Grid会自动根据元素高度创建行，彻底消除多余空白
• 用margin-bottom: var(--gap)给元素添加间距，替代原有的网格行间隙逻辑，保证布局紧凑性
• 完整保留了原有的交错布局、颜色主题和时间线连接线样式，视觉效果与原设计一致

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