CSS Grid高度匹配问题求助：需实现等高网格与4/3宽高比

你遇到的问题核心在于网格项的容器（button、grid-gallery-item）未完全占满网格单元格高度，同时直接给img设置aspect-ratio会和Grid的行高规则冲突，导致左侧大图底部出现间隙。以下是具体修正方案：

问题分析 #

1. grid-gallery-item和内部的button默认没有占满网格单元格的高度，导致img的height:100%无法继承到完整的单元格高度。
2. 给img直接设置aspect-ratio:4/3，会让img优先维持自身比例，忽略Grid单元格的实际高度，最终出现高度不匹配。

修正代码 #

CSS部分 #

body {
  padding: 40px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 新增，避免padding/margin干扰尺寸计算 */
}

.grid-gallery {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: repeat(2, 1fr);
  gap: 1rem;
}

.grid-gallery-item {
  aspect-ratio: 4 / 3; /* 把宽高比绑定到网格项本身 */
}

.grid-gallery-item:first-child {
  grid-row: span 2;
  aspect-ratio: 2 / 3; /* 左侧跨两行，宽高比调整为2:3，对应整体4/3的比例逻辑 */
}

.grid-gallery-item button {
  display: block;
  width: 100%;
  height: 100%;
  border: none; /* 可选，移除按钮默认边框 */
  padding: 0;
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例，裁剪多余部分 */
}

HTML部分（保持原结构即可） #

<div class="grid-gallery">
  <div class="grid-gallery-item">
    <button>
      <img src="https://via.placeholder.com/400" />
    </button>
  </div>
  
   <div class="grid-gallery-item">
    <button>
      <img src="https://via.placeholder.com/400" />
    </button>
  </div>
  
   <div class="grid-gallery-item">
    <button>
      <img src="https://via.placeholder.com/400" />
    </button>
  </div>
  
   <div class="grid-gallery-item">
    <button>
      <img src="https://via.placeholder.com/400" />
    </button>
  </div>
  
   <div class="grid-gallery-item">
    <button>
      <img src="https://via.placeholder.com/400" />
    </button>
  </div>
</div>

关键改动说明 #

• 将aspect-ratio从img移至grid-gallery-item：让网格项先锁定宽高比，确保整个网格布局比例一致。
• 左侧跨两行项调整aspect-ratio:2/3：它的宽度是2fr，高度对应2行（2个1fr），2/3的比例刚好契合整体4/3的要求（2×2 / 3 = 4/3）。
• 让button占满grid-gallery-item高度：通过display:block+width:100%+height:100%，确保img完全填充容器，消除底部间隙。
• 新增box-sizing:border-box：避免元素的padding或border影响整体尺寸计算。

调整后，整个网格高度会完全匹配，所有图片都能维持正确的比例，底部间隙也会消失。

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