时间戳

首页 > 解决方案 > 当间隙设置为 0（响应式地图）时，为什么 CSS 网格中的图块之间存在小的像素间隙？

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

问题描述

我正在尝试创建一个游戏级别选择地图，其中我需要来自放置在网格中非常特定的图块上的精灵表中的不同精灵。为此，我使用 CSS 网格并将图块放置在与grid-row-start和内联的网格上grid-column-start。一切正常，除了一件事：瓷砖之间有一个小间隙，但gap在 CSS 中设置为 0。那个小间隙足以看起来很刺耳（带有间隙的地图截图）。

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

父 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 行。每个图块都是正方形的（devtools 中 CSS 网格的截图）。

所有瓷砖的通用类：

.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 ) 时，仍然会出现间隙。

任何帮助是极大的赞赏。

标签： cssresponsive-designcss-gridsprite-sheet

解决方案

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

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

推荐阅读