我有一个 html 文档，其中使用了 CSS 网格：
<!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>
但是，即使我将行间隙和列间隙设置为 1px，我仍然得到这个：
如您所见，第一个列间隙和行间隙是 2px 宽。如果我增加行数和列数，该模式就会重复。我究竟做错了什么？谢谢！
P粉2129717452023-09-08 11:09:20
尝试以下操作
替换：
.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; 并让网格内的内容决定宽度和高度。