简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Lacunes incohérentes à l'aide de CSS Grid
P粉648469285
P粉648469285 2023-09-07 14:39:28
0
1
527

J'ai un document html utilisant la grille 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>

Mais même si je règle les espaces entre les lignes et les colonnes à 1 px, j'obtiens toujours ceci :

Comme vous pouvez le voir, l'espacement de la première colonne et l'espacement des lignes ont une largeur de 2 pixels. Si j'augmente le nombre de lignes et de colonnes, le modèle se répète. Qu'ai-je fait de mal? Merci!

P粉648469285
P粉648469285

répondre à tous(1)
P粉212971745
P粉2129717452023-09-08 11:09:20 1 plancher

Essayez ce qui suit

Remplacement : 

.grid1 {
        display: grid;
        grid-template-columns: repeat(3, 1rem);
        grid-template-rows: repeat(3, 1rem);
        row-gap: 1px;
        column-gap: 1px;
    }

Remplacer par : 

.grid1 {
    display: grid;
    grid-template-columns: repeat(3, 1rem);
    grid-template-rows: repeat(3, 1rem);
    gap: 1px;

}

gap:1px est tout ce dont vous avez besoin.

Cependant, vous devez également définir la largeur et la hauteur de .grid1, par exemple : 

.grid1 {
        display: grid;
        grid-template-columns: repeat(3, 1rem);
        grid-template-rows: repeat(3, 1rem);
        gap: 1px;
        width:100px;
        height:100px;
    
    }

Si vous n'êtes pas sûr de la largeur et de la hauteur, définissez-les simplement sur width:auto; height:auto; et laissez le contenu de la grille déterminer la largeur et la hauteur.

Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！