Ich habe ein HTML-Dokument mit CSS-Raster:
<!DOCTYPE html>
<html lang="en-IT">
<head>
<title>Site</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.grid1 {
display: grid;
grid-template-columns: repeat(3, 1rem);
grid-template-rows: repeat(3, 1rem);
row-gap: 1px;
column-gap: 1px;
}
.cell1 {
fill:rgb(130, 190, 234);
stroke-width:0;
stroke:rgb(0,0,0);
width: 100%;
height: 100%;
}
</style>
</head>
<body id="mainBody">
<div class="grid1">
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<rect class="cell1"/>
</svg>
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<rect class="cell1"/>
</svg>
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<rect class="cell1"/>
</svg>
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<rect class="cell1"/>
</svg>
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<rect class="cell1"/>
</svg>
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<rect class="cell1"/>
</svg>
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<rect class="cell1"/>
</svg>
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<rect class="cell1"/>
</svg>
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<rect class="cell1"/>
</svg>
</div>
</body>
</html>
Aber selbst wenn ich die Zeilen- und Spaltenabstände auf 1 Pixel einstelle, erhalte ich immer noch Folgendes:
Wie Sie sehen können, sind die erste Spaltenlücke und die Zeilenlücke 2 Pixel breit. Wenn ich die Anzahl der Zeilen und Spalten erhöhe, wiederholt sich das Muster. Was habe ich falsch gemacht? Danke!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
尝试以下操作
替换：
.grid1 { display: grid; grid-template-columns: repeat(3, 1rem); grid-template-rows: repeat(3, 1rem); row-gap: 1px; column-gap: 1px; }替换为：
.grid1 { display: grid; grid-template-columns: repeat(3, 1rem); grid-template-rows: repeat(3, 1rem); gap: 1px; }gap:1px 就是您所需要的。
但是，您还需要为.grid1设置宽度和高度，例如：
.grid1 { display: grid; grid-template-columns: repeat(3, 1rem); grid-template-rows: repeat(3, 1rem); gap: 1px; width:100px; height:100px; }如果您不确定宽度和高度，只需将它们设置为
width:auto; height:auto;并让网格内的内容决定宽度和高度。