CSS Grid布局下跨列与单列图片高度不一致如何解决

你的怀疑方向正确，高度不一致问题确实和gap:20px相关，但不是属性bug，是CSS Grid的默认宽度计算规则和图片自适应逻辑共同导致的：

• 你定义了3个等宽列（1fr 1fr 1fr），列之间共2个20px的间隙，单列表格单元的内容宽度为(容器总宽度 - 2*20px)/3 = w
• 第二张图跨第2、3两列，它的容器宽度会自动包含这两列之间的20px间隙，总宽度为w + 20px + w = 2w + 20px
• 图片设置了width: 100%; height: auto，会按原始宽高比自动计算渲染高度：
  • 第一张图尺寸300px*300px（宽高比1:1），渲染高度等于宽度w
  • 第二张图尺寸600px*300px（宽高比2:1），渲染高度为(2w + 20px)/2 = w + 10px
• 最终两张图高度差10px，就是你看到的渲染不一致现象。

根据你的布局需求二选一即可：

方案1：适配当前两元素布局（无裁切、无变形） #

如果当前行只有这两个元素，不需要保留三列结构给后续同排元素使用，直接修改网格列定义即可，天然对齐高度：

1. 修改.c3-grid-image-wrapper的grid-template-columns属性
2. 移除第二个.grid-item上的内联样式grid-column: span 2 / auto

修改后的核心代码：

.c3-section-grid-image {

}
.c3-grid-image-wrapper {
    display: grid;
    /* 原三列等宽改为1fr 2fr，匹配两个元素的宽度比例 */
    grid-template-columns: 1fr 2fr;
    gap: 20px;
}
.c3-grid-image-wrapper .grid-item {
    position: relative;
    display: flex;
    flex-direction: column;
}
.c3-grid-image-wrapper .grid-item img {
    display: block;
    width: 100%;
    height: auto;
}
.c3-grid-image-wrapper .grid-item .grid-text {
    padding: 10px 0;
}
.c3-grid-image-wrapper .grid-item .text-title {
    font-size: 1.4em;
    font-weight: bold;
}
.c3-grid-image-wrapper .grid-item .text-desc {
    font-size: 1em;
}
.c3-grid-image-wrapper.text-layout-inside .grid-text {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    padding: 16px;
}

<div class="c3-section-grid-image"
     style="margin: 10px 0px; padding: 0px; background-color: rgb(255, 255, 255); color: rgb(255, 255, 255);">
  <div class="c3-grid-image-wrapper text-layout-inside">
    <div class="grid-item">
      <img src="http://res.cloudinary.com/xingshang/image/upload/v1656153419/decteamstore/220625/d9fo1r5fdlfk7jkxuf9k.jpg">
      <div class="grid-text" style="text-align:center;">
        <div class="text-title">IPhone-1</div>
      </div>
    </div>
    <!-- 移除了第二个grid-item上的grid-column: span 2 / auto内联样式 -->
    <div class="grid-item">
      <img src="http://res.cloudinary.com/xingshang/image/upload/v1656153439/decteamstore/220625/amgv1kkbehftmb9wgwv9.jpg">
      <div class="grid-text" style="text-align:center;">
        <div class="text-title">IPhone-2</div>
      </div>
    </div>
  </div>
</div>

方案2：保留三列结构（裁切量可忽略、无变形） #

如果你需要保留三列结构（比如后续要在同排加第三个元素、第二行需要三个等宽单元），通过强制图片填满容器+适配裁切实现对齐，高度差仅10px，视觉上完全无感知：
仅需要修改两处CSS即可，其余代码保持原样：

.c3-grid-image-wrapper .grid-item {
    position: relative;
    display: flex;
    flex-direction: column;
    /* 新增溢出隐藏，避免图片超出容器 */
    overflow: hidden;
}
.c3-grid-image-wrapper .grid-item img {
    display: block;
    width: 100%;
    /* 原height: auto改为100%，强制填满容器高度 */
    height: 100%;
    /* 新增cover适配，保持图片宽高比，仅裁切边缘极少内容 */
    object-fit: cover;
}

请运行代码片段并在全屏页面下查看效果。

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