如何防止CSS Grid行高随动态内容增长

能否定义一个带动态行数（auto-rows）的CSS Grid，让容器的垂直空间仅按行数分配，内容限制在该空间内？

左侧是内容未撑高行时的等高效果，右侧是问题场景——长文本导致行高不均：

期望所有行保持和左侧一致的高度，超出的文本自动隐藏。

原始代码 #

CSS

.columns {
  display: flex;
}

.content-area {
  height: 300px;
  width: 500px;
  display: grid;
  grid-auto-rows: 1fr;
  background: pink;
}

.item {
  margin: 2px;
  background: gray;   
}

HTML

<div class="columns">
  <div class="content-area">
    <div class="item">1 short text</div>
    <div class="item">2 short text</div>
    <div class="item">3 short text</div>
    <div class="item">4 short text</div>
  </div>

  <div class="content-area">
    <div class="item">1 short text</div>
    <div class="item">2 short text</div>
    <div class="item">3 short text</div>
    <div class="item">4 long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text</div>
  </div>
</div>

解决方案 #

给.item添加以下属性即可实现需求：

.item {
  margin: 2px;
  background: gray;
  /* 新增属性 */
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

说明

• height: 100%：强制子元素占满Grid行分配的高度，避免内容撑高行容器
• overflow: hidden：超出元素高度的文本自动隐藏
• box-sizing: border-box：确保margin、padding不会额外撑开元素，保证高度计算准确

修改后，右侧的长文本会被限制在与左侧一致的行高内，所有行保持等高。

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