我有一個 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;
並讓網格內的內容決定寬度和高度。