如何让图片适配Grid Layout布局？解决网格高度不一致问题

我正在创建如下布局：

当前代码如下：

<div class="tour-grid"> 
        
          <div class="tgItem tg-left"> 
            <a href="" class="tgCard">
              <div class="tgCard__image ro-4">
                <img class="ro-4 js-lazy loaded" src="img/tours/3.png" alt="image" data-ll-status="loaded">
              </div> 
            </a>

          </div>

          <div class="tgItem tgChild"> 
            <a href="" class="tgCard">
              <div class="tgCard__image ro-4">
                <img class="ro-4 js-lazy loaded" src="img/blog/2/2.png" alt="image" data-ll-status="loaded">
              </div>  
            </a> 
          </div>

          <div class="tgItem tgChild"> 
            <a href="" class="tgCard">
              <div class="tgCard__image ro-4">
                <img class="ro-4 js-lazy loaded" src="img/blog/2/3.png" alt="image" data-ll-status="loaded">
              </div> 
            </a> 
          </div>
          
          <div class="tgItem tgChild"> 
            <a href="" class="tgCard">
              <div class="tgCard__image ro-4">
                <img class="ro-4 js-lazy loaded" src="img/tours/2.png" alt="image" data-ll-status="loaded">
              </div> 
            </a> 
          </div> 
        </div>

当前遇到的问题：

• 网格高度不一致，图片无法适配div容器
• 右侧三个div的总高度需要和左侧列完全对齐（效果参考：）

想请教Grid布局的规则：是否需要把右侧三个tgChild包裹成一个单独的容器？（参考结构：）

解决办法 #

1. 要不要包裹右侧三个元素？

不用额外套容器，CSS Grid本身就支持这种布局，直接通过行列规则就能实现对齐。

2. 关键CSS代码

.tour-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 左右两列平分宽度 */
  gap: 16px; /* 列之间的间距，可自行调整合适数值 */
}

.tg-left {
  grid-row: span 3; /* 让左侧元素跨3行，刚好和右侧3个元素的总高度对齐 */
}

.tgCard__image {
  height: 100%; /* 图片容器占满父元素高度 */
}

.tgCard__image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 图片按比例填充，避免拉伸变形，超出部分自动裁剪 */
  border-radius: 4px; /* 对应原有ro-4类的圆角样式 */
}

3. 代码说明

• grid-template-columns: 1fr 1fr：将整个网格划分为等宽的两列
• grid-row: span 3：让左侧元素占据3行高度，正好匹配右侧3个元素的总高度
• object-fit: cover：解决图片适配问题，保证图片比例正确且填满容器
• 给图片容器设置height: 100%，确保它完全撑满父元素的高度空间

调整后，右侧三个元素会自动均分左侧的高度，图片也能完美适配容器，实现你想要的对齐效果。

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