当间隙设置为 0（响应式地图）时，为啥 CSS 网格中的图块之间存在小的像素间隙？

Posted 2023-03-25

【中文标题】当间隙设置为 0（响应式地图）时，为啥 CSS 网格中的图块之间存在小的像素间隙？

【英文标题】：Why is there a small pixel gap between tiles in CSS grid when gap is set to 0 (responsive map)?当间隙设置为 0（响应式地图）时，为什么 CSS 网格中的图块之间存在小的像素间隙？

【发布时间】：2020-11-27 21:17:50

【问题描述】：

我正在尝试创建一个游戏关卡选择地图，其中我需要来自放置在网格中非常特定的图块上的精灵表中的不同精灵。为此，我使用 CSS 网格并将图块放置在与 grid-row-start 和 grid-column-start 内联的网格上。一切正常，除了一件事：瓷砖之间有一个 small 间隙，但 gap 在 CSS 中设置为 0。这个小差距足以让人觉得很刺耳 (screenshot of map with the gap)。

因为这是一款手机游戏，所以网格具有响应性并适用于所有设备尺寸非常重要。因此，我使用的是百分比，vw 在 CSS 中。我认为这些差距可能是由小数舍入错误引起的？

父 div：

.tilemap 
    display: grid;
    height: 150vw; /* 15 rows, 10 columns */
    grid-template-rows: repeat(15, 1fr);    /* 15 rows */
    grid-template-columns: repeat(10, 1fr); /* 10 columns */
    gap: 0;
    place-content: stretch end;

网格为全宽 (100vw)，每个图块为 10vw = 10 列。 tilemap 的高度为 150vw = 15 行。每个图块都是正方形 (screnshot of CSS grid in devtools)。

所有图块的通用类：

.tilemap div 
    max-width: 100%;
    background-size: 100%;
    background-image: url("../images/responsive-spritesheet.png");

每个图块都有不同的背景位置。包括在内是为了完整性：

.tilemap div.road.vertical 
    background-position: 0 100%;

问题不在于 spritesheet 图像，因为当我将其注释掉并将其替换为 background-color (screenshot) 时，仍然会出现间隙。

非常感谢任何帮助。

【问题讨论】：

希望你在 CSS 中设置* margin: 0; padding: 0; ？

另外，你能在 codepen 中重现这个吗？

您是否检查过您的瓷砖是否从其他地方继承了任何其他样式？行为非常奇怪。也许您可以发布 devtools 的屏幕截图，以便我们可以看到应用于图块的样式。我刚刚在沙盒中尝试了一个非常相似的示例，它工作得很好。

@JayCodist，边距和填充设置为 0 并没有改变任何东西。我会尝试重现它。

您将花费 2 天时间来修复它，并且可能不会修复它...最好将布局更改为 flex 或浮动。

【参考方案1】：

我知道这个问题很久以前就被问过了，但我通过删除 fr 单位并为我的网格单元使用精确长度解决了我自己的类似问题。

这可能会对您有所帮助，因为我看到您正在使用 repeat()，因此您的网格中的间距相等，就像我一样。