Saya mempunyai dokumen html di mana grid CSS digunakan: <!DOCTYPEhtml><htmllang="en-IT"><head><title>Tapak</title><metacharset="UTF-8"><metaname=" viewport"content=&qu

Jurang tidak konsisten menggunakan Grid CSS-Soal Jawab Rangkaian PHP Cina

Soal Jawab

Jurang tidak konsisten menggunakan Grid CSS

P粉648469285 2023-09-07 14:39:28 pandangan 762

CSS3

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!

Your Answer

serahkan

1 jawapan

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.

2023-09-08 11:09:20

serahkan