如何在不指定元素高度的情况下对齐不同内容的Grid容器？

当然可以实现，核心思路是让所有列表项共享同一套网格行轨道，而非每个项单独做独立的Grid布局。

方法一：将外层列表改为Grid布局（兼容性最优） #

把原来的外层.list从Flex改成Grid，让所有子元素统一在同一个网格中排列，对应区域的高度会自动由每行最高的元素决定，既实现对齐，又不会产生多余空白。

修改后的CSS代码：

.list {
  padding: 0;
  margin: 0;
  list-style: none;
  display: grid; /* 替换flex为grid */
  grid-template-columns: 1fr 1fr; /* 两列宽度均分 */
  gap: 31px;
}

/* 直接给每个模块分配网格行，无需每个item单独做grid */
.time {
  grid-row: 1;
}

.specialty {
  grid-row: 2;
}

.line {
  grid-row: 3;
}

.university {
  grid-row: 4;
}

.description {
  grid-row: 5;
}

HTML结构保持不变即可。

方法二：使用Subgrid（现代浏览器支持） #

如果想保留每个.item作为独立Grid容器的结构，可以用CSS Subgrid特性，让子Grid的行轨道继承外层Grid的行高度，既保持结构独立性，又能实现对齐。

修改后的CSS代码：

.list {
  padding: 0;
  margin: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(5, auto); /* 定义5行，高度自适应内容 */
  gap: 31px;
}

.list .item {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: subgrid; /* 继承外层Grid的行轨道 */
  grid-row: span 5; /* 占满外层的5行 */
}

.time { grid-area: time; }
.specialty { grid-area: specialty; }
.line { grid-area: timeline; }
.university { grid-area: university; }
.description { grid-area: description; }

为什么原来的grid-auto-rows: 1fr会有空白？ #

1fr会把容器的剩余空间平均分配给所有行轨道，当某行内容高度小于轨道高度时，就会出现空白。而用auto或min-content结合共享网格行的方式，行轨道高度刚好容纳内容，自然不会有空白。

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