我有一個 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 寬。如果我增加行數和列數，該模式就會重複。我究竟做錯了什麼？謝謝！
嘗試以下操作
替換：
.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;並讓網格內的內容決定寬度和高度。