如何通过CSS让网格行高始终匹配指定列（A列）的内容高度？

可以用纯CSS实现，核心思路是让B列的高度不主导网格行高，完全跟随A列的内容高度自适应，同时保证B列高度与A列一致。

直接看修改后的代码：

<div style='display: grid; grid-template-columns: 2fr 1fr; gap: 1em;'>
   <div>
      这是A列。有时它的内容会比B列多，因此高度更大，这是正常的。但有时它的内容会比B列少，此时网格高度仍应仅与该列高度一致，B列需相应调整自身高度
   </div>
   <div style="height: 0; min-height: 100%; overflow: auto;">
      这是B列。该列的高度应始终与A列匹配。如果该列内容比A列高，则应调整该列高度以匹配A列。
      <!-- 可添加更多内容测试溢出效果 -->
      <br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容
   </div>
</div>

原理说明： #

• 默认情况下，网格行高由所有单元格中最高的内容决定，要让行高只由A列控制，给B列设置height: 0，这样它不会主动撑开行高，行高就完全由A列的内容高度决定。
• min-height: 100%会让B列高度拉伸至网格行的高度（也就是A列的高度），保证两列高度一致。
• overflow: auto是为了处理B列内容超出A列高度的情况：此时B列会出现滚动条，既保证高度匹配，又能查看全部内容。如果不需要滚动，换成overflow: hidden即可隐藏溢出内容。

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