如何让Grid高度仅由可调整元素决定且保持卡片等高（纯CSS）

实现思路 #

• 外层Grid容器不设置固定高度，完全由第一列可调整高度的元素撑开
• 第二列嵌套滚动容器，继承Grid单元格的高度（即第一列的高度），超出内容滚动
• 滚动容器内部用Grid布局实现卡片等高，利用grid-auto-rows: 1fr均分高度

代码实现 #

<div class="grid-container">
  <!-- 第一列：可调整高度的元素 -->
  <div class="resizable-column">
    <p>拖动底部边框调整高度</p>
  </div>
  <!-- 第二列：滚动列表 + 等高卡片 -->
  <div class="scroll-column">
    <div class="card-grid">
      <div class="card">
        <p>卡片1：短内容</p>
      </div>
      <div class="card">
        <p>卡片2：较长内容<br>第二行内容<br>第三行内容</p>
      </div>
      <div class="card">
        <p>卡片3：中等长度内容<br>第二行</p>
      </div>
      <div class="card">
        <p>卡片4：短内容</p>
      </div>
    </div>
  </div>
</div>

/* 外层Grid容器：由第一列高度决定整体高度 */
.grid-container {
  display: grid;
  grid-template-columns: 200px 1fr; /* 第一列固定宽度，第二列占剩余空间 */
  gap: 16px;
  border: 1px solid #eee;
  padding: 16px;
}

/* 第一列：可垂直调整高度 */
.resizable-column {
  resize: vertical;
  overflow: auto; /* 必须设置overflow才能让resize生效 */
  background: #f5f5f5;
  padding: 12px;
  border: 2px solid #ddd;
}

/* 第二列：滚动容器，高度继承Grid单元格（即第一列高度） */
.scroll-column {
  height: 100%;
  overflow-y: auto;
  border: 2px solid #ddd;
  padding: 12px;
}

/* 滚动容器内部的Grid：实现卡片等高 */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  grid-auto-rows: 1fr; /* 关键：所有行高度均分 */
}

.card {
  background: #fff;
  border: 1px solid #ccc;
  padding: 12px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

关键说明 #

1. 外层Grid高度自适应：没有给.grid-container设置任何高度属性，它的高度完全由第一列.resizable-column的高度决定，因为Grid容器默认会根据内容高度收缩/扩展。
2. 第二列滚动容器高度继承：.scroll-column设置height: 100%，会自动匹配Grid单元格的高度（也就是第一列的高度），超出内容通过overflow-y: auto滚动。
3. 卡片等高实现：.card-grid用grid-auto-rows: 1fr，让每一行的高度都等于该行最高卡片的高度，所有行高度均分可用空间，确保同一行的卡片高度完全一致。

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