cari

Rumah  >  Soal Jawab  >  teks badan

Jurang tidak konsisten menggunakan Grid CSS

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!

P粉648469285P粉648469285530 hari yang lalu654

membalas semua(1)saya akan balas

  • P粉212971745

    P粉2129717452023-09-08 11:09:20

    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.

    balas
    0
  • Batalbalas