I have an html document that uses CSS grid:
<!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>
But even if I set the row and column gaps to 1px, I still get this:
As you can see, the first column gap and row gap are 2px wide. If I increase the number of rows and columns, the pattern repeats. What did I do wrong? Thanks!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Try the following
replace:
.grid1 { display: grid; grid-template-columns: repeat(3, 1rem); grid-template-rows: repeat(3, 1rem); row-gap: 1px; column-gap: 1px; }is replaced with:
.grid1 { display: grid; grid-template-columns: repeat(3, 1rem); grid-template-rows: repeat(3, 1rem); gap: 1px; }gap:1px is all you need.
However, you also need to set the width and height for .grid1, for example:
.grid1 { display: grid; grid-template-columns: repeat(3, 1rem); grid-template-rows: repeat(3, 1rem); gap: 1px; width:100px; height:100px; }If you are not sure about the width and height, just set them to
width:auto; height:auto;and let the content within the grid determine the width and height.