如何调整CSS中div卡片间距？卡片数量少时间距异常扩大

问题描述 #

主容器内的card-div数量较少时，行间距会自动扩大；数量增多时间距反而缩小，多次尝试修复无效。

现象 #

• 卡片数量少：行与行之间出现多余的空白间距
• 卡片数量多：间距变得紧凑，符合预期

问题原因 #

你的CSS存在三个关键问题：

1. 重复的容器定义：.containers被重复声明两次，先设置grid布局属性，后又覆盖为flex布局，导致布局规则冲突。
2. Flex布局默认行为：flex容器默认使用align-items: stretch，且容器设置了固定高度height:55em，当内容不足以填满容器时，剩余空间会被分配给行间距，导致间距被撑开。
3. 不必要的定位干扰：.card-div的position: relative; left:25px会打乱布局对齐，且未明确设置卡片的上下间距规则。

修复代码 #

替换原CSS为以下代码：

.containers {
    position: relative;
    overflow: auto;
    width: 94%;
    height: 55em;
    left: 3%;
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start; /* 核心：让内容从顶部排列，不自动填充容器高度 */
    gap: 25px; /* 统一控制卡片的水平/垂直间距 */
    border-radius: 6px;
    margin-top: 10px;
}

.card-div{
    width: 15em;
    max-height: 19em;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #6d24247d;
    box-sizing: border-box;
    border-radius: 10px;
    box-shadow: 0 7px 25px rgb(0 0 0 / 62%);
    transition: transform 0.2s ease-in-out;
}

关键修改说明 #

• align-content: flex-start：强制flex容器内的多行内容从顶部开始排列，不会将剩余空间分配给行间距，彻底解决内容少时间距被撑开的问题。
• gap:25px：替代原有的grid-gap和零散的margin设置，统一控制卡片之间的水平和垂直间距，布局更稳定。
• 移除冗余代码：删除重复的.containers定义和不必要的position: relative; left:25px，消除布局冲突。

内容的提问来源于stack exchange，提问作者Patrick D.