CSS Grid布局中，如何让跨行图片填满行列可用空间？

你的布局结构已经符合预期，但跨两行的图片（第1、4张）只适配宽度、填不满高度，核心原因是图片的父容器.image没有占满Grid单元格的空间，且图片本身的height: auto限制了它的高度拉伸。

解决步骤： #

• 让.image容器完全填充Grid分配的单元格空间
• 强制图片填充容器，配合object-fit: cover保证图片比例不变

修改后的完整代码： #

CSS

.image__gallery-grid {
    max-height: none;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 2.5rem;
    display: grid;
}

.image__gallery-grid .image:nth-child(1) {
    grid-column: span 1 / span 1;
    grid-row: span 2 / span 2;
}

.image__gallery-grid .image:nth-child(2) {
    grid-column-start: 2;
    grid-row: span 1 / span 1;
}

.image__gallery-grid .image:nth-child(3) {
    grid-column-start: 2;
    grid-row: span 1 / span 1;
    grid-row-start: 2;
}

.image__gallery-grid .image:nth-child(4) {
    grid-column: span 1 / span 1;
    grid-column-start: 3;
    grid-row: span 2 / span 2;
}

.image__gallery-grid .image:nth-child(5) {
    grid-column-start: 4;
    grid-row: span 1 / span 1;
}

.image__gallery-grid .image:nth-child(6) {
    grid-column-start: 4;
    grid-row: span 1 / span 1;
    grid-row-start: 2;
}

/* 新增和修改的核心样式 */
.image {
    width: 100%;
    height: 100%;
    overflow: hidden; /* 裁剪超出容器的图片部分 */
}

img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保持图片比例并填充容器 */
    object-position: center; /* 居中显示图片核心区域 */
}

HTML（无需修改）

<div class="image__gallery-grid">
  <div class="image"><img src="https://placehold.co/900x900"></div>
  <div class="image"><img src="https://placehold.co/900x900"></div>
  <div class="image"><img src="https://placehold.co/900x900"></div>
  <div class="image"><img src="https://placehold.co/900x900"></div>
  <div class="image"><img src="https://placehold.co/900x900"></div>
  <div class="image"><img src="https://placehold.co/900x900"></div>
</div>

原理说明 #

1. .image设置width:100%;height:100%后，会完全占据Grid单元格分配的宽高空间，解决了容器高度缺失的问题
2. 图片设置width:100%;height:100%强制填充容器，再通过object-fit:cover保证图片不会变形，同时裁剪超出部分，object-position:center确保图片的核心内容显示在容器中

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