CSS Grid：如何让图片项最大化且不使文本溢出固定容器？

核心方案 #

通过Grid布局的列配置结合图片比例控制，实现无需JS、无需硬编码宽度的自适应效果：

代码示例 #

<div class="grid-container">
  <div class="text-content">这是长度未知的文本内容，全宽状态下不会超出容器高度，换行后也能被容器高度限制</div>
  <img src="your-image-path.jpg" alt="自适应图片" class="adaptive-image">
</div>

.grid-container {
  /* 固定宽高 */
  width: 400px;
  height: 200px;
  display: grid;
  /* 文本列可压缩，图片列自适应宽度 */
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px; /* 可选间距 */
}

.text-content {
  min-height: 0; /* 突破Grid默认的最小高度限制，避免文本撑开容器 */
  /* 可选：若需限制文本行数，添加以下溢出处理 */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.adaptive-image {
  max-height: 100%; /* 图片高度不超过容器 */
  object-fit: contain; /* 保持图片比例，完整显示 */
}

原理说明 #

1. Grid列配置：minmax(0, 1fr) 让文本列突破Grid默认的min-width: auto限制，允许列宽被压缩，从而给图片留出尽可能多的空间；图片列用auto，根据图片自适应后的宽度分配空间。
2. 文本高度控制：min-height: 0 确保文本项不会因为换行导致高度撑开Grid容器，严格遵守容器的固定高度。
3. 图片比例控制：max-height: 100% 限制图片最高为容器高度，object-fit: contain 保证图片按原比例缩放，不会变形或溢出容器。

如果需要图片优先占据左侧空间，只需调整列顺序为 grid-template-columns: auto minmax(0, 1fr);，并对应调整HTML元素顺序或使用order属性即可。

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