如何使用Grid布局让垂直堆叠的盒子高度统一为最高盒子的高度

嘿，这个需求用Grid布局其实超容易实现！我之前做类似组件时也碰到过，马上给你讲清楚怎么改。

你现在的代码里，容器用了单列Grid布局，但Grid默认会让每一行的高度由该行内容决定，所以两个盒子高度不一样。要让它们都和最高的那个保持同高，只需要做两个小修改：

第一步：清理冗余样式 #

先把.box里的margin-bottom: 1rem去掉，因为你已经在容器里用了row-gap（现在可以直接写成gap: 1rem更简洁），重复的外边距会导致间距混乱。

第二步：添加核心Grid属性 #

给容器加上grid-auto-rows: 1fr，这个属性就是关键！它会让Grid自动创建的每一行高度都相等，并且自动匹配内容最高的那一行的高度。

修改后的完整代码 #

CSS 代码

.container {
  display: grid;
  grid-template-columns: 1fr; /* 单列布局，repeat(1,1fr)可以简化成1fr */
  gap: 1rem; /* 合并行间距和列间距，写法更简洁 */
  grid-auto-rows: 1fr; /* 核心：让所有行高度统一为最高行的高度 */
}

.box {
  border: 1px solid #ddd;
  padding: 1rem;
  /* 已移除冗余的margin-bottom */
}

HTML 代码

<div class="container">
  <div class="box">
    <strong>Box 1:</strong>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis lectus quis sem lacinia nonummy. Proin mollis lorem non dolor. In hac habitasse platea dictumst. Nulla ultrices odio. Donec augue. Phasellus dui.
  </div>
  <div class="box">
    <strong>Box 2:</strong>
    Lorem ipsum dolor sit amet.
  </div>
</div>

为什么这样能行？ #

grid-auto-rows: 1fr会告诉Grid：所有自动生成的行（也就是每个盒子所在的行）都分配相等的空间。当其中某一行因为内容变高时，所有行都会自动调整到这个最高高度，不管你有2个还是N个盒子，这个规则都能生效，完全适配动态内容的场景。

备注：内容来源于stack exchange，提问作者Meek