如何用CSS Grid实现不等高图片的自适应响应式网格布局？

问题概述 #

需实现指定的图片拼贴布局，当前使用CSS Grid时存在两个核心问题：

• 左侧上方图片高度不足，无法填满网格单元格，导致上下图片间隙过大
• 第三张图片需要错位显示，不与前两张左对齐

核心修正与实现步骤 #

1. 修正Grid列定义：原代码中grid-auto-columns用法错误，应使用grid-template-columns定义固定列数；通过grid-auto-rows: auto让行高自适应图片内容。
2. 填满网格单元格：将图片的max-height: 100%改为height: 100%，结合object-fit: cover保证图片比例同时填满单元格。
3. 错位定位第三张图：通过margin-top实现灵活错位，搭配媒体查询保证响应式适配。

修正后的完整代码 #

CSS代码 #

.fourth {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.collage2 {
    display: grid;
    width: 85%;
    /* 定义2列等宽布局 */
    grid-template-columns: repeat(2, 1fr);
    /* 行高自动适配内容 */
    grid-auto-rows: auto;
    /* 列间距可按需调整 */
    column-gap: 1rem;
}

.collage2 > img {
    object-fit: cover;
    width: 100%;
    /* 强制图片填满单元格高度 */
    height: 100%;
    display: block; /* 消除图片默认行间距 */
}

/* 左侧两张图固定在第一列 */
.collage2 img:nth-child(1),
.collage2 img:nth-child(2) {
    grid-column: 1;
}

/* 第三张图固定在第二列，通过margin-top实现错位 */
.collage2 img:nth-child(3) {
    grid-column: 2;
    /* 向下偏移量可根据视觉需求调整 */
    margin-top: 2rem;
}

/* 响应式适配：小屏幕切换为单列布局 */
@media (max-width: 768px) {
    .collage2 {
        grid-template-columns: 1fr;
        row-gap: 1rem;
    }
    .collage2 img:nth-child(3) {
        margin-top: 0;
        grid-column: 1;
    }
}

HTML代码 #

<section class="fourth">
    <div class="collage2">
        <img src="/images/photo-3.jpg" alt="Man drawing on whiteboard">
        <img src="/images/photo-4.jpg" alt="Ableton address on a brick wall">
        <img src="/images/photo-5.jpg" alt="Man and woman working at a music studio">
    </div>
</section>

关键说明 #

• 行高自适应：grid-auto-rows: auto会让每一行高度自动匹配该行内图片的实际高度，彻底消除空白间隙。
• 图片无变形填满：height: 100%配合object-fit: cover确保图片拉伸填满单元格的同时，保持比例不变形。
• 错位灵活性：margin-top是最易调整的错位方式，若需更贴合网格的错位效果，也可替换为grid-row: 1 / span 2让第三张图跨越两行，再用align-self: start控制垂直位置。
• 响应式兼容：媒体查询在小屏幕下自动切换为单列布局，清除错位margin，保证移动端显示协调。

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