CSS Grid原生方案：控制非关键单元格不触发其他区域过度扩展

先明确你的核心诉求：让承载非关键信息的描述区域（.desc）不决定网格行的高度，只填充其他内容剩余的垂直空间；宽度自动占满水平空闲区域；同时解决短描述时标题+信息区块无法居中的问题。

实现思路 #

1. 调整网格模板结构：让标题（.title）和信息（.info）占据左侧垂直空间，描述（.desc）跨这两行，确保行高完全由title和info的内容决定
2. 利用Grid的对齐属性控制短内容时的居中效果，不需要依赖绝对定位hack
3. 给描述区域设置溢出隐藏，确保过长内容不会撑高网格项

完整代码实现 #

.list {
  display: flex;
  flex-wrap: wrap;
  font: 12px/14px Verdana;
}

.item {
  display: grid;
  /* 重新规划网格区域：缩略图占第一行，标题/信息在左侧上下分布，描述跨右侧两行 */
  grid-template-areas:
    "thumb thumb thumb thumb"
    "sl title desc sr"
    "sl info desc sr";
  grid-template-columns: auto auto 1fr auto;
  /* 关键：前两行高度由内容决定，描述区域仅填充剩余垂直空间 */
  grid-template-rows: auto minmax(auto, 1fr);
  min-width: calc(var(--min-item-size) + 4px);
  max-width: calc(var(--max-item-size) + 4px);
  border: dotted 2px darkblue;
  margin: 4px 2px auto 2px;
  /* 短内容时让内部元素垂直居中 */
  align-items: center;
}

.item > * {
  min-width: 0;
  min-height: 0;
  border: dotted 1px dodgerblue;
  margin: 1px;
}

.thumb {
  grid-area: thumb;
  margin: auto;
  height: 100px;
  background: linear-gradient(lightskyblue, deepskyblue);
}

.title {
  grid-area: title;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  /* 让标题在所在行底部对齐，和信息区块保持紧凑 */
  align-self: end;
}

.info {
  grid-area: info;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 让信息在所在行顶部对齐，和标题区块保持紧凑 */
  align-self: start;
}

.desc {
  grid-area: desc;
  /* 让描述区域填满垂直剩余空间 */
  align-self: stretch;
  overflow: hidden;
  /* 可选：短描述时让内容在区域内垂直居中 */
  display: flex;
  align-items: center;
}

.desc-text::after {
  content: var(--lorem-ipsum);
}

.desc-text.short::after {
  content: var(--lorem-ipsum-short);
}

:root {
  --lorem-ipsum: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";
  --lorem-ipsum-short: "Lorem";
  --min-item-size: 100px;
  --max-item-size: 150px;
}

<div class="list">
  <div class="item">
    <div class="thumb" style="width: 150px">1</div>
    <div class="title">Short title</div>
    <div class="info">Short info</div>
    <div class="desc">
      <div class="desc-text"></div>
    </div>
  </div>
  <div class="item">
    <div class="thumb" style="width: 150px">2</div>
    <div class="title">Very long and detailed title</div>
    <div class="info">Very long and detailed info</div>
    <div class="desc">
      <div class="desc-text"></div>
    </div>
  </div>
  <div class="item">
    <div class="thumb" style="width: 50px">3</div>
    <div class="title">Short title</div>
    <div class="info">Short info</div>
    <div class="desc">
      <div class="desc-text"></div>
    </div>
  </div>
  <div class="item">
    <div class="thumb" style="width: 50px">4</div>
    <div class="title">Very long and detailed title</div>
    <div class="info">Very long and detailed info</div>
    <div class="desc">
      <div class="desc-text"></div>
    </div>
  </div>
  <div class="item">
    <div class="thumb" style="width: 150px">5</div>
    <div class="title">Short title</div>
    <div class="info">Short info</div>
    <div class="desc">
      <div class="desc-text short"></div>
    </div>
  </div>
  <div class="item">
    <div class="thumb" style="width: 150px">6</div>
    <div class="title">Very long and detailed title</div>
    <div class="info">Very long and detailed info</div>
    <div class="desc">
      <div class="desc-text short"></div>
    </div>
  </div>
</div>

关键细节说明 #

• 行高控制：grid-template-rows: auto minmax(auto, 1fr) 确保网格项的高度完全由标题和信息的内容决定，描述区域仅填充剩余垂直空间，不会撑高整个项
• 居中处理：.item设置align-items: center，配合.title的align-self: end和.info的align-self: start，让标题+信息区块在短内容时保持居中且紧凑对齐
• 描述区域行为：.desc用align-self: stretch填满垂直空间，overflow: hidden隐藏过长内容；如果需要短描述在区域内居中，保留display: flex; align-items: center即可
• 无hack实现：完全依赖CSS Grid原生属性，移除了之前的绝对定位和手动调整列宽的dirty hack

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