當(dāng)需要對(duì)齊內(nèi)部包含不同內(nèi)容的網(wǎng)格容器時(shí)，就會(huì)出現(xiàn)問(wèn)題。如果設(shè)置了grid-auto-rows: 1fr屬性，則網(wǎng)格是對(duì)齊的，但網(wǎng)格內(nèi)部的元素之間會(huì)有一個(gè)空白空間。在沒(méi)有明確指定網(wǎng)格中每個(gè)元素的高度的情況下，有可能實(shí)現(xiàn)對(duì)齊嗎？你如何擺脫未填補(bǔ)的空間？

.list {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 31px;
}

.list .item {
    width: 100%;
    display: grid;
    grid-template-columns: 100%;
    grid-template-areas:
      'time'
      'specialty'
      'timeline'
      'university'
      'description';
  }

.time {
  grid-area: time;
}

.specialty {
  grid-area: specialty;
}

.timeline {
  grid-area: timeline;
}

.university {
  grid-area: university;
}

.description {
  grid-area: description;
}

<ul class="list">
  <li class="item">
    <p class="time">2012 - 2016</p>
    <p class="specialty">Programming Language</p>
    <div class="line">
      <div class="line__dot"></div>
      <hr class="line__hr">
    </div>
    <p class="university">Cambridge University
    </p>
    <p class="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  </li>
    <li class="item">
    <p class="time">2012 - 2016</p>
    <p class="specialty">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
    <div class="line">
      <div class="line__dot"></div>
      <hr class="line__hr">
    </div>
    <p class="university">Cambridge University
    </p>
    <p class="description">Lorem Ipsum is simply dummy text of the printing</p>
  </li>
</ul>

我覺(jué)得用CSS網(wǎng)格是不可能達(dá)到你想要的效果的。這是因?yàn)槊總€(gè)網(wǎng)格項(xiàng)不知道其他網(wǎng)格項(xiàng)的頂部所占的高度。

這里有一個(gè)需要JavaScript的解決方案:

每個(gè)項(xiàng)目的頂部(水平線之前的html元素)需要用容器包裝器包裝。 項(xiàng)目不需要CSS網(wǎng)格。 setWrapperHeight()函數(shù)將計(jì)算每個(gè)包裝占據(jù)的高度，然后將所有包裝高度設(shè)置為一個(gè)常量值。

function setWrapperHeight() {
  const wrappers = document.querySelectorAll(".item .wrapper");

  // get max height of wrappers
  const maxHeight = [...wrappers].reduce(
    (max, w) => Math.max(w.offsetHeight, max), -1
  );

  // set same height to each wrapper
  wrappers.forEach((w) => (w.style.height = `${parseInt(maxHeight)}px`));
}
setWrapperHeight();

.list {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 31px;
}

.list .item {
  outline: 1px solid;
  width: 100%;
}

<ul class="list">
  <li class="item">
    <div class="wrapper">
      <p class="time">2012 - 2016</p>
      <p class="specialty">Programming Language</p>
    </div>
    <div class="line">
      <div class="line__dot"></div>
      <hr class="line__hr">
    </div>
    <p class="university">Cambridge University
    </p>
    <p class="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  </li>
  <li class="item">
    <div class="wrapper">
      <p class="time">2012 - 2016</p>
      <p class="specialty">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
    </div>
    <div class="line">
      <div class="line__dot"></div>
      <hr class="line__hr">
    </div>
    <p class="university">Cambridge University
    </p>
    <p class="description">Lorem Ipsum is simply dummy text of the printing</p>
  </li>

</ul>