CSS Grid实现：右侧两图总高度匹配左侧单图高度的方法

需求：右侧列中的两张图片总高度与左侧列的单张图片高度相同，所有图片尺寸一致，且.right容器高度绝不能超过.left容器高度。

原HTML代码：

<div class="wrapper">
  <div class="left">
    <img src="https://picsum.photos/id/237/300/200"/>
  </div>

  <div class="right">
    <div class="right--first">
      <img src="https://picsum.photos/id/237/300/200"/>
    </div>
    <div class="right--second">
      <img src="https://picsum.photos/id/237/300/200"/>
    </div>
  </div>
</div>

原CSS代码：

.wrapper {
  display: grid;
  grid-template-columns: 50% 50%;
}

.left {
  grid-column: 1;
  grid-row: 1;
}

.right {
  grid-column: 2;
  grid-row: 1 / span 2;
}

解决方案一：CSS Grid实现 #

无需调整整体Grid结构，只需修改.right容器的内部布局，即可让两张图片平分高度且不超过左侧容器：

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 用1fr替代50%，自适应容器宽度更灵活 */
  gap: 8px; /* 可选，添加列间距 */
}

.left img {
  width: 100%;
  height: auto; /* 保持图片原始比例，同时让Grid行高由左侧图片决定 */
  display: block; /* 去除图片默认的底部间距 */
}

.right {
  display: grid;
  grid-template-rows: 1fr 1fr; /* 内部两行平分高度 */
  height: 100%; /* 完全继承左侧Grid行的高度 */
}

.right img {
  width: 100%;
  height: 100%; /* 填充所在网格行的高度 */
  object-fit: cover; /* 保持图片比例，避免拉伸变形 */
  display: block;
}

核心逻辑： #

• 左侧图片的height: auto会自动撑开Grid行的高度，右侧容器通过height: 100%继承这个高度；
• 右侧内部嵌套Grid，用1fr 1fr让两个子容器平分高度，确保两张图片总高度等于左侧单张图片高度；
• object-fit: cover保证图片在填充容器时不扭曲，若允许拉伸可改用object-fit: fill。

解决方案二：Flex布局实现 #

如果更倾向用Flex，同样可以简单实现需求：

.wrapper {
  display: flex;
  gap: 8px;
}

.left {
  flex: 1; /* 左右列各占一半宽度 */
}

.left img {
  width: 100%;
  height: auto;
  display: block;
}

.right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 上下两张图片自动平分垂直空间 */
  height: 100%; /* 匹配左侧容器高度 */
}

.right img {
  width: 100%;
  height: calc(50% - 4px); /* 减去gap的一半，避免总高度溢出容器 */
  object-fit: cover;
  display: block;
}

核心逻辑： #

• 外层Flex分配左右列宽度，左侧图片的高度决定整个Flex容器的高度；
• 右侧内部垂直Flex布局，justify-content: space-between让两张图片分别贴紧容器上下，自动平分高度；
• 若添加了gap，用calc(50% - gap/2)调整图片高度，避免总高度超过容器。

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