如何实现同行同结构列内元素基于最大元素的水平对齐？

需求说明 #

需要让多列布局中，同位置的元素（如标题、段落）基于同行中该类元素的最大高度水平对齐，文本为动态值，支持自适应多行显示。

效果对比 #

调整前 #

预期效果 #

解决方案 #

通过Grid布局可直接实现该对齐需求，Grid会自动统一同一网格轨道的元素高度，无需额外计算最大高度。修改后的代码如下：

CSS代码 #

p,
h6 {
  margin: 0;
}

.container {
  background: green;
  /* 替换flex为grid布局，设置三列等宽 */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px;
}

.item {
  background: red;
  /* 内部用grid分配行高，让标题区域自动匹配最大高度 */
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 40px;
}

.item img {
  width: 100px;
  height: 100px;
  background: yellow;
  /* 居中图片 */
  justify-self: center;
}

.item h6 {
  background: blue;
}

.item p {
  background: green;
}

HTML代码（无需修改） #

<div class="container">
  <div class="item">
    <img src="" alt="">
    <h6>Some Title Some Title Some Title Some Title Some Title Some Title Some Title Some Title Some Title Some Title</h6>
    <p>
      Nunc nonummy metus. Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus. Aliquam erat volutpat. Ut a nisl id ante tempus hendrerit. Nam pretium turpis et arcu. Nunc nonummy metus. Phasellus volutpat,
      metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus. Aliquam erat volutpat. Ut a nisl id ante tempus hendrerit. Nam pretium turpis et arcu.
    </p>
  </div>
  <div class="item">
    <img src="" alt="">
    <h6>Some Title Some</h6>
    <p>
      Nunc nonummy metus. Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus. Aliquam erat volutpat. Ut a nisl id ante tempus hendrerit. Nam pretium turpis et arcu.
    </p>
  </div>
  <div class="item">
    <img src="" alt="">
    <h6>Some Title Some Title Some Title Some Title Some Title Some Title Some Title Some Title Some Title Some Title Some Title Some Title Some Title Some Title Some Title Some Title Some Title Some Title Some Title Some Title</h6>
    <p>
      Nunc nonummy metus. Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus. Aliquam erat volutpat. Ut a nisl id ante tempus hendrerit. Nam pretium turpis et arcu.
    </p>
  </div>
</div>

原理说明 #

• 外层.container使用Grid布局，将三列设为等宽，保证列结构统一；
• 内层.item通过grid-template-rows: auto 1fr auto分配行高：
  • auto：图片区域自适应自身高度；
  • 1fr：标题区域占据剩余可用高度，自动匹配同行中最高标题的高度，实现对齐；
  • auto：段落区域自适应自身内容高度。

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