简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Inkonsistente Lücken bei Verwendung von CSS Grid
P粉648469285
P粉648469285 2023-09-07 14:39:28
0
1
525

Ich habe ein HTML-Dokument mit CSS-Raster: 

<!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>

Aber selbst wenn ich die Zeilen- und Spaltenabstände auf 1 Pixel einstelle, erhalte ich immer noch Folgendes:

Wie Sie sehen können, sind die erste Spaltenlücke und die Zeilenlücke 2 Pixel breit. Wenn ich die Anzahl der Zeilen und Spalten erhöhe, wiederholt sich das Muster. Was habe ich falsch gemacht? Danke!

P粉648469285
P粉648469285

Antworte allen(1)
P粉212971745
P粉2129717452023-09-08 11:09:20 1 Etage

尝试以下操作

替换：

.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; 并让网格内的内容决定宽度和高度。

Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！