如何用CSS实现行高由最短单元格决定的Grid布局？

可以实现，核心是让每行的高度由该行中尺寸最小的单元格决定，同时限制同行内较高的单元格高度不超过行高，超出部分按需处理（隐藏或滚动）。

具体实现步骤：

• 定义双列Grid容器，设置列布局和间距
• 将行高设置为min-content，让行高自动适配该行单元格的最小内容高度
• 给所有Grid单元格设置height: 100%，强制单元格高度继承行高，再通过overflow属性处理超出内容

完整代码示例：

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 双列等宽布局 */
  grid-auto-rows: min-content; /* 行高由最小单元格决定 */
  gap: 1rem; /* 单元格间距 */
}

.grid-item {
  height: 100%; /* 强制单元格高度等于行高 */
  overflow: hidden; /* 超出部分隐藏，也可换成overflow-y:auto启用滚动 */
  border: 1px solid #eee;
  padding: 0.8rem;
}

<div class="grid-container">
  <div class="grid-item">
    内容少的单元格，高度小
  </div>
  <div class="grid-item">
    内容多的单元格，原本高度会更高，但现在被限制为和左边单元格一样的高度，超出部分直接隐藏。内容多的单元格，原本高度会更高，但现在被限制为和左边单元格一样的高度，超出部分直接隐藏。内容多的单元格，原本高度会更高，但现在被限制为和左边单元格一样的高度，超出部分直接隐藏。
  </div>
  <div class="grid-item">
    内容多的单元格，原本高度会更高，但现在被限制为和右边单元格一样的高度，超出部分直接隐藏。内容多的单元格，原本高度会更高，但现在被限制为和右边单元格一样的高度，超出部分直接隐藏。
  </div>
  <div class="grid-item">
    内容少的单元格，高度小
  </div>
</div>

如果希望超出内容可以滚动查看，只需要把.grid-item的overflow: hidden替换为overflow-y: auto即可。

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