如何修复网格边距，解决窗口缩放时水平元素间隙错乱问题

如您所见，每当调整窗口大小时，水平相邻元素之间的间隙就会错乱。以下是针对性解决办法：

问题根源 #

1. 直接给卡片元素加margin，配合网格容器的justify-items: center，会在窗口尺寸变化时导致间距计算混乱。
2. grid-template-columns中使用minmax(589.19px, auto)，auto无法让列填充容器剩余空间，列宽调整时容易出现布局错位。

修改方案 #

调整网格容器和卡片的样式代码：

main { 
    display: grid;
    /* 用1fr让列自动填充剩余空间，替代auto */
    grid-template-columns: repeat(auto-fit, minmax(589.19px, 1fr));
    overflow-x: hidden;
    /* 用gap统一控制网格元素间距，替代卡片的margin */
    gap: 27px; /* 原卡片margin是13.5px，两侧合计27px，保持间距一致 */
    align-items: center;
    /* 去掉justify-items: center，避免双重对齐干扰 */
}

.character-card{ 
    display: flex;
    /* 去掉margin，改用grid容器的gap控制间距 */
    background-color: rgb(60,62,68);
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(37, 37, 37, 0.5);
    /* 如果需要卡片在单元格内水平居中，可添加：margin: 0 auto; */
}

原理说明 #

• gap是Grid布局专属的间距控制属性，能确保元素之间的间距始终均匀，不受对齐方式影响。
• minmax(..., 1fr)让列在满足最小宽度要求的前提下，自动分配容器剩余空间，避免窗口调整时出现列宽适配异常。
• 移除卡片的margin和容器的justify-items: center，消除双重对齐逻辑导致的间距错乱问题。

内容的提问来源于stack exchange，提问作者alessi.gg