如何让CSS Grid同一行的单元格在列间保持相同高度？

你要的是每行内的两个单元格高度一致，且每行高度由该行内容最高的单元格决定，而不是所有行统一高度。原代码里的grid-auto-rows: 1fr会强制所有行平分容器高度，刚好违背了你的需求。

解决方案很简单，只需要移除这个强制行高的属性，Grid默认的行为就会满足你的要求：

• Grid会自动为每行计算高度，高度由该行中内容最高的单元格决定
• 该行内的所有单元格都会自动继承这个行高，自然保持等高
• 保留align-items: center可以让单元格内的内容垂直居中，不影响单元格高度

修改后的代码 #

CSS #

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  /* 移除grid-auto-rows: 1fr，让行高随内容自动调整 */
  margin: 8px 0;
  width: 600px;
  gap: 2px;
  align-items: center; /* 保持内容垂直居中 */
}

.grid-item {
  border: 1px solid grey;
  background-color: #fea;
}

.bigger-text {
  font-size: 21px;
  line-height: 36px;
}

HTML #

<div class="grid-container">
  <div class="grid-item">aaa</div>
  <div class="grid-item bigger-text">BBB</div>
  <div class="grid-item">ccc</div>
  <div class="grid-item bigger-text">DDD</div>
  <div class="grid-item">eee</div>
  <div class="grid-item bigger-text">FFF</div>
</div>

如果不需要内容垂直居中，只需要去掉align-items: center，单元格内的内容会默认顶部对齐，单元格高度依然保持每行等高。

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