如何让Grid布局中images容器与description高度保持一致？

要让.images容器和.description高度完全匹配，同时避免纵向长图撑开容器导致描述区被压缩，可以结合CSS Grid的单元格联动特性和图片自适应规则来实现：

核心思路 #

利用Grid布局中同一行单元格高度一致的特性，强制.images继承该行高度（由.description内容决定），再通过flex布局和图片缩放规则控制图片显示。

1. 调整Grid布局规则 #

给article明确行高分配，让标题行自适应高度，内容行由description的高度主导：

article {
  display: grid;
  grid-template-areas: "title title" "images description";
  grid-template-rows: auto 1fr; /* 标题行自动适配内容，内容行占剩余空间，实际高度由description决定 */
  resize: both;
  overflow: hidden;
  gap: 8px; /* 可选：给网格项之间添加间距 */
}

2. 限制.images容器高度并适配图片 #

让.images容器继承Grid单元格高度，内部用flex布局分配图片空间，同时保证图片比例不变：

.images {
  grid-area: images;
  height: 100%; /* 强制和description所在单元格高度一致 */
  display: flex;
  flex-direction: column;
  gap: 8px; /* 可选：图片间添加间距 */
  overflow-y: auto; /* 可选：图片总高度超容器时显示滚动条 */
}

img {
  display: block;
  max-width: 100%;
  flex: 1; /* 多张图片均分容器高度，单张图片可设为max-height: 100% */
  object-fit: contain; /* 保持图片比例，完整显示 */
  width: auto; /* 宽度随高度自适应 */
}

完整代码示例 #

article {
  display: grid;
  grid-template-areas: "title title" "images description";
  grid-template-rows: auto 1fr;
  resize: both;
  overflow: hidden;
  gap: 8px;
}

.title {
  grid-area: title;
  padding: 8px;
}

.images {
  grid-area: images;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
}

img {
  display: block;
  max-width: 100%;
  flex: 1;
  object-fit: contain;
  width: auto;
}

.description {
  grid-area: description;
  padding: 8px;
}

<article>
  <div class="title">There are many other articles like this one on the page</div>
  <div class="images">
    <img alt="random image" src="https://i.sstatic.net/MB9ui48p.png">
    <img alt="random image" src="https://i.sstatic.net/MB9ui48p.png">
  </div>
  <div class="description">The description of the thing. The description of the thing. The description of the thing. The description of the thing. The description of the thing. The description of the thing.</div>
</article>

原理说明 #

• Grid布局中，images和description处于同一行，该行高度由内容较高的单元格决定，通过height: 100%强制.images和该行高度一致，即与.description高度匹配。
• flex布局让.images内的图片均分容器高度，object-fit: contain保证图片比例不变，不会出现拉伸变形。
• 可选的overflow-y: auto可以避免图片总高度超过容器时溢出页面。

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