CSS Grid单元格高度自适应问题：如何实现动态行高调整？

开发者阿泽

2026-5-13

解决Grid布局中内容容器高度自适应问题

我明白你的问题了——你希望grid-item-d对应的区域在文本内容较短时自动收缩高度，只有当内容超过150px时才固定高度并显示滚动条。现在的问题出在你把高度限制加在了网格行上，而没有直接作用于文本容器本身。

问题分析

你当前的grid-template-rows: minmax(auto, 150px)是在限制整个网格行的高度范围，这会导致：

当文本内容很长时，行高被限制在150px，这部分符合预期；
但当文本内容较短时，虽然网格行理论上应该自适应内容高度，但long-text-box设置的height: 100%会强制继承网格行的高度，反而让容器无法收缩。

正确的思路是：让网格行高度完全自适应内容，然后给文本容器直接设置高度限制，让它自己处理内容溢出的情况。

修改后的代码

CSS部分

.grid-container { 
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr 1fr; 
  grid-template-areas: "a d d d"; 
  /* 移除网格行的高度限制，让行高完全由内容决定 */
}
div { border: 1px solid black; }
.grid-item-a { grid-area: a; }
.grid-item-d { grid-area: d; }
.long-text-box { 
  max-height: 150px; /* 设置容器最大高度 */
  overflow: auto;    /* 内容超出时显示滚动条 */
}

HTML部分（无需修改）

<div class="grid-container">
  <div class="grid-item-a"> side </div>
  <div class="grid-item-d">
    <div class="long-text-box">
      <!-- 这里可以放短文本或长文本进行测试 -->
    </div>
  </div>
</div>