如何解决CSS网格布局窗口缩放时左侧大图高度不匹配问题

我用CSS实现了一个网格布局，常规屏幕尺寸下显示正常，但缩小浏览器窗口时，左侧大图所在容器的高度无法和右侧medium_1、medium_2列的总高度匹配。

问题代码 #

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />

<style>
.small_1 { grid-area: small_1; }
.small_2 { grid-area: small_2; }
.small_3 { grid-area: small_3; }
.large { 
    grid-area: large;
}
.medium_1 { grid-area: medium_1; }
.medium_2 { grid-area: medium_2; }

.grid-container {
  display: grid;
  grid-template-areas:
    'small_1 small_1 small_2 small_2 small_3 small_3'
    'large large large large medium_1 medium_1'
    'large large large large medium_2  medium_2 ';
  grid-row-gap: 30px;
  padding: 62px;
}

.grid-container > div {
  text-align: center;
}
</style>
</head>
<body>
<!-- 页面结构示例 -->
<div class="grid-container">
  <div class="small_1">模块1</div>
  <div class="small_2">模块2</div>
  <div class="small_3">模块3</div>
  <div class="large"><img src="大图地址" alt="左侧大图"></div>
  <div class="medium_1">右侧模块1</div>
  <div class="medium_2">右侧模块2</div>
</div>
</body>
</html>

修复方案 #

问题根源是网格行高的自适应逻辑：右侧medium_1和medium_2的内容高度随窗口缩小变化，但左侧跨两行的large容器未被强制填满分配的网格区域。通过以下两步修复：

1. 明确网格行高度规则
   给.grid-container添加grid-template-rows属性，让行高由右侧内容主导，确保后两行高度匹配：

.grid-container {
  display: grid;
  grid-template-areas:
    'small_1 small_1 small_2 small_2 small_3 small_3'
    'large large large large medium_1 medium_1'
    'large large large large medium_2 medium_2';
  grid-template-rows: auto 1fr 1fr; /* 第一行自适应顶部小模块高度，后两行平分剩余空间 */
  grid-row-gap: 30px;
  padding: 62px;
}

2. 强制大图容器填满网格区域
   给.large设置height: 100%，让它占满分配的网格行高度；如果容器内有图片，添加适配样式避免变形：

.large {
  grid-area: large;
  height: 100%; /* 填满网格分配的高度 */
}

/* 针对large容器内的图片 */
.large img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例，填满容器且不拉伸变形 */
}

调整后，无论窗口如何缩放，左侧大图容器都会和右侧两列的总高度保持一致。

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