网格具有不同间隙大小的问题

Question

我有一个使用显示网格的 div，我不知道它发生了什么，但正如你所看到的，每 2x2 行上有更多的间隙空间，我需要所有项目都具有相同的间隙。

JS：

<div className={styles.inventory}>
   {array.map(item => (
     <div className={styles.slot} />
   ))}
</div>

CSS：

.inventory {
    max-height: 30em;
    overflow-y: scroll;
    display: grid;
    grid-template-columns: repeat(5, 7em);
    gap: 0.1em; 
    background-color: var(--background-color);
}

.slot {
    height: 7em;
    width: 7em;
    background-color: var(--slot-color);
}

错误：

Answer 1

尝试将列间隙设为绝对值，例如 gap: 1px;。