web-dev-qa-db-fra.com

Rembourrage à la grille CSS

Je suis un débutant en HTML et CSS, j'ai donc expérimenté différents systèmes comme Flex et CSS Grid. J'ai rencontré un problème où je ne peux pas ajouter de remplissage à un élément à l'intérieur d'une colonne de grille. Est-ce qu'il y a un moyen de réparer ceci? Lorsque j'essaie d'ajouter du rembourrage à l'en-tête physique lui-même, cela ne fonctionne pas car c'est une grille d'affichage, voici le code:

header{
    width:100%;
    height: 5%;
    color: #fff;
    background: #434343;
    display: grid;
    grid-template-columns: 2fr auto;
}


header:not(menu, h1, nav){
    display: block;
    padding:500px;

}
htmlcssgrid-layoutcss-grid
4
Jordy337

Il est difficile de comprendre ce que vous souhaitez accomplir en fonction de votre publication, mais il semble que le remplissage ne se produise pas car votre règle CSS ne cible pas correctement l'élément. Déplacer le remplissage dans la règle d'en-tête, comme indiqué ci-dessous, applique le remplissage.

header{
    width:100%;
    height: 5%;
    color: #fff;
    background: #434343;
    display: grid;
    grid-template-columns: 2fr auto;
    padding:500px;
}


header:not(menu, h1, nav){
    display: block;
    /*padding:500px;*/

}
<header>
test
</header>
1
Adam Chubbuck

Vous pouvez ajouter un rembourrage entre les conteneurs de grille en utilisant un rembourrage de grille ou un écart de ligne, selon vos besoins.

remplissage de grille

écart de ligne

Sinon, j'aurais besoin d'une question plus détaillée pour résoudre votre problème.

1
Tanckom