如何实现列表项中同类行元素（如Reviews行）的垂直对齐？

嘿，这个需求完全可以用CSS Grid完美解决，刚好能避开你说的不能用min-height的问题！

核心思路就是调整Grid的行高分配：让标题行占据列表项中所有剩余的垂直空间，这样不管标题内容长短，后面的Reviews、Price等元素都会固定在列表项的下半部分，自然就能保持垂直对齐了。

我们来修改一下你的代码：

修改后的CSS代码 #

ul {
  display: flex;
  gap: 20px;
  list-style: none;
  padding: 0;
}

li {
  display: flex;
  flex-direction: column;
  /* 给列表项设置最小高度，让布局更规整，可按需调整或移除 */
  min-height: 300px;
  background-color: #f1f1f1;
  border: 1px solid black;
  width: 100%;
  padding: 20px;
}

.content {
  display: grid;
  /* 关键修改：第一行设为1fr占据剩余空间，其余行自适应内容高度 */
  grid-template-rows: 1fr auto auto auto;
  gap: 0.5rem;
  /* 让Grid容器占满列表项的高度 */
  height: 100%;
}

.price {
  grid-row: 3;
  background-color: cornflowerblue;
  color: white;
}

.reviews {
  background-color: tomato;
}

h2 {
  margin: 0;
  background-color: goldenrod;
  /* 标题过长时自动换行，避免撑破容器 */
  word-wrap: break-word;
}

对应的HTML代码（无需改动） #

<ul>
  <li>
    <div class="content">
      <h2>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse minima eum possimus eius aperiam deleniti aspernatur eligendi illum repellendus sed.</h2>
      <div class="reviews">Reviews</div>
      <div class="price">$10.99</div>
      <div class="discount">10% off today!</div>
    </div>
  </li>
  <li>
    <div class="content">
      <h2>Lorem ipsum</h2>
      <div class="reviews">Reviews</div>
      <div class="price">$10.99</div>
      <!-- Empty discount row -->
    </div>
  </li>
  <li>
    <div class="content">
      <h2>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse minima eum po.</h2>
      <div class="reviews">Reviews</div>
      <div class="price">$10.99</div>
      <div class="discount">10% off today!</div>
    </div>
  </li>
</ul>

关键说明： #

• 给li设置min-height是为了让所有列表项保持基本一致的高度，避免短标题导致列表项过矮，你可以根据需求调整或移除这个属性。
• grid-template-rows: 1fr auto auto auto是核心：1fr会让标题行自动填充列表项中除了后面几行（Reviews、Price、Discount）之外的所有空间，不管标题内容多长，后面的元素都会被“推”到相同的垂直位置。
• 即使有的列表项没有Discount元素，也不会影响对齐效果，因为Grid的auto行高在无内容时会自动收缩为0，不会打乱布局。

这样就能完美实现你想要的效果啦！

内容来源于stack exchange