如何让CSS Grid列的高度匹配最短列的高度？

CSS Grid默认行高由该行最高的网格项决定，没法直接通过原生Grid属性让行高等于最短项高度，但可以通过调整Grid配置结合内容容器的溢出设置，实现你要的「左列高度和右列一致，内容溢出时滚动」的效果。

解决方案代码 #

CSS

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  grid-template-rows: min-content; /* 核心：行高取该行最短子项的高度 */
}

.grid > div {
  border: 1px solid red;
  padding: 15px;
  height: 100%; /* 让每个网格子项占满行高 */
}

p {
  margin: 0;
  padding: 0;
  overflow: auto; /* 内容超出时显示滚动条 */
  height: 100%; /* 让文本容器占满父元素高度 */
}

HTML

<div class="grid">
  <div>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>

  <div>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </div>
</div>

原理说明 #

• grid-template-rows: min-content：强制网格行高度等于该行所有子项的「最小内容高度」，也就是最短列的高度。
• 给网格子项和文本容器设置height: 100%：确保它们都占满行高，当文本内容超过这个高度时，overflow: auto会自动生成滚动条，不会撑高容器。

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