Saya mempunyai dokumen html menggunakan grid 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>
Tetapi walaupun saya menetapkan jurang baris dan lajur kepada 1px, saya masih mendapat ini:
Seperti yang anda boleh lihat, jurang lajur pertama dan jurang baris adalah 2px lebar. Jika saya menambah bilangan baris dan lajur, corak akan berulang. Apa yang saya buat salah? Terima kasih!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Cuba yang berikut
Pengganti:
.grid1 { display: grid; grid-template-columns: repeat(3, 1rem); grid-template-rows: repeat(3, 1rem); row-gap: 1px; column-gap: 1px; }Ganti dengan:
.grid1 { display: grid; grid-template-columns: repeat(3, 1rem); grid-template-rows: repeat(3, 1rem); gap: 1px; }gap:1px ialah semua yang anda perlukan.
Walau bagaimanapun, anda juga perlu menetapkan lebar dan ketinggian untuk .grid1, sebagai contoh:
.grid1 { display: grid; grid-template-columns: repeat(3, 1rem); grid-template-rows: repeat(3, 1rem); gap: 1px; width:100px; height:100px; }Jika anda tidak pasti tentang lebar dan ketinggian, cuma tetapkannya kepada
width:auto; height:auto;dan biarkan kandungan dalam grid menentukan lebar dan tinggi.