如何实现图片网格中下方图片上移至与上方图片间距10px？

问题原因 #

你当前用的CSS Grid默认是grid-auto-flow: row布局，每一行的高度由该行里最高的图片决定，下一行的图片会从该行起始位置（也就是上一行最高图片的底部）开始排列。哪怕设置了align-items: flex-start，同列图片还是会和上一行最高图片保持grid-gap的间距，最终导致布局出现多余空白。

修复方案 #

1. 启用网格密集排列：给.image-grid加上grid-auto-flow: dense，让网格自动填充前面行的空白区域，避免因图片高度不一产生的间距混乱。
2. 清理干扰样式：删掉图片上的margin-bottom: -10px，grid-gap已经能精准控制网格间距，负margin会破坏布局逻辑。
3. 统一边距控制：调整margin-side类的边距，避免额外的左右边距影响图片在网格中的尺寸计算（如果不需要左右边距可以直接移除该类，或者把左右边距合并到容器的padding里）。

修改后的完整代码 #

内联CSS部分

.navbar {
    padding-bottom: 0;
}

.margin-side {
    /* 移除过大的左右边距，避免干扰网格布局 */
    margin-left: 0;
    margin-right: 0;
}

.rounded20 {
    border-radius: 20px;
}

.image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    grid-gap: 10px; /* 统一控制所有图片间的间距 */
    justify-content: flex-start;
    align-items: flex-start;
    grid-auto-flow: dense; /* 关键：开启密集排列 */
}

.image-grid img {
    border-radius: 20px;
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    /* 移除多余的负margin */
}

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Wolfy</title>
    <link rel="icon" href="../images/favicon.ico">
    <link rel="stylesheet" href="../css/main.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <style>
        .navbar {
            padding-bottom: 0;
        }

        .margin-side {
            margin-left: 0;
            margin-right: 0;
        }

        .rounded20 {
            border-radius: 20px;
        }

        .image-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            grid-gap: 10px;
            justify-content: flex-start;
            align-items: flex-start;
            grid-auto-flow: dense;
        }

        .image-grid img {
            border-radius: 20px;
            width: 100%;
            height: auto;
            max-width: 100%;
            max-height: 100%;
        }
    </style>
</head>
<body class="bg-dark">
<nav class="navbar navbar-light navy-blue1 main-text rounded">
    <a href="../index.html" class="brand-text text-light">Wolfy</a>
    <a href="#" class="left text-light">Images</a>
    <img src="../images/Wolfy-banner.png" class="right banner mb-0">
</nav>
<br>
<br>
<div class="container">
    <div class="image-grid">
        <img src="../images/wolfy1.jpg" class="rounded20 margin-side">
        <img src="../images/wolfy3.jpg" class="rounded20 margin-side">
        <img src="../images/wolfy4.jpg" class="rounded20 margin-side">
        <img src="../images/wolfy5.jpg" class="rounded20 margin-side">
        <img src="../images/wolfy12.jpg" class="rounded20 margin-side">
        <img src="../images/wolfy13.jpg" class="rounded20 margin-side">
    </div>
</div>
</body>
</html>

效果说明 #

添加grid-auto-flow: dense后，网格会自动把矮图片填充到上一行的空白区域，所有图片之间的间距都会稳定保持10px，不会再出现同列图片被迫对齐到最高元素底部的情况，最终布局会接近你期望的效果：

期望效果：

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