如何防止不同窗口/显示器尺寸下图片间距发生变化？

问题根源在于当前网格布局使用了百分比行高（grid-template-rows: repeat(20, 5%)），而行高基于容器的100vh，视口高度越高，每个网格行的高度越大，导致图片间的间距随视口同步放大。以下是几种可行的解决方案：

方法1：固定行高的网格布局 #

将网格行高替换为固定单位（如px/rem），确保每行高度不随视口变化，图片间距自然固定。

修改容器CSS：

#div_block-479-7 {
    display: grid; 
    grid-template-columns: repeat(20, 5%);
    grid-template-rows: repeat(20, 40px); /* 替换为固定行高，可按需调整 */
    width: 100vw;
    min-height: 100vh; /* 用min-height避免视口过小时内容截断 */
    background-color:crimson;
}

此时两张图片分别位于第5行和第12行，间距为(12-5)*40px=280px，始终保持固定。如需调整间距，修改行高或图片的grid-row值即可。

方法2：绝对定位固定图片位置 #

放弃网格布局的自动排列，通过相对+绝对定位直接固定图片位置，完全脱离视口高度的影响。

修改容器CSS：

#div_block-479-7 {
    position: relative;
    width: 100vw;
    height: 100vh;
    background-color:crimson;
}

修改图片CSS：

#image-470-7{ 
    position: absolute;
    right: 10%; /* 对应原网格布局的横向位置，可按需调整 */
    top: 200px; /* 固定距离顶部的位置 */
    z-index:6;
}
#image-471-7{ 
    position: absolute;
    right: 5%;
    top: 480px; /* 与上方图片的间距固定为280px */
    z-index:7;
}

这种方式可以精确控制每张图片的坐标，间距由top值的差值决定，不会随视口变化。

方法3：混合网格行高（复杂布局可选） #

如果需要保留部分弹性行，可将固定行高与弹性行（fr单位）结合，仅让图片所在行使用固定高度：

#div_block-479-7 {
    display: grid; 
    grid-template-columns: repeat(20, 5%);
    grid-template-rows: repeat(4, 1fr) repeat(8, 40px) repeat(8, 1fr); /* 中间8行固定高度，其余弹性 */
    width: 100vw;
    height: 100vh;
    background-color:crimson;
}

需根据图片的grid-row值调整固定行的范围，适合有特殊布局需求的场景。

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