相互对齐网格元素

Question

当需要对齐内部不同内容的网格容器时会出现问题。如果设置 grid-auto-rows: 1fr 属性，则网格对齐，但网格内的元素之间会有一个空白空间。是否可以在不明确指定网格内每个元素的高度的情况下实现对齐？您如何摆脱未填充的空间？

.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>

Answer 1

我觉得用CSS grid不可能达到你想要的效果。这是因为每个网格项都不知道其他网格项顶部占据的高度。

这是一个需要 JavaScript 的解决方案：

• 每个项目的顶部（水平线之前的html元素）需要包装在容器中

  wrapper

  .
• 不需要 CSS 网格

  item

  .

• setWrapperHeight()

  函数会计算每个

  wrapper

  占用的高度，然后将所有包装高度设置为一个常数值。

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>

如果要使用CSS网格定位

item

中剩余的项目，请将

wrapper

中找不到的html元素包装在另一个容器

wrapper2

中。将 CSS 网格应用到

wrapper2

.