Conserver le format des éléments dans une disposition de grille CSS fluide

-1

J'ai une liste d'éléments div dans une disposition de grille CSS à 4 colonnes. Les éléments div sont réglés à 100% de largeur, avec un rembourrage de 100% pour maintenir un rapport d'aspect de 1: 1. C'est une technique courante, comme on peut le voir ici: https://stackoverflow.com/a/6615994/7949834 Conserver le format des éléments dans une disposition de grille CSS fluide

Ceci fonctionne dans Firefox, mais pas dans Chrome. Dans Chrome, les éléments n'occupent aucun espace dans le conteneur de la grille. Quelle est la raison pour ça?

ul { 
 
    border: 2px solid red; 
 
    display: grid; 
 
    grid-gap: 5%; 
 
    grid-template-columns: auto auto auto auto; 
 
    list-style-type: none; 
 
} 
 

 
div { 
 
    background-color: green; 
 
    padding-top: 100%; 
 
    width: 100%; 
 
}

<ul> 
 
    <li> 
 
    <div></div> 
 
    </li> 
 
    <li> 
 
    <div></div> 
 
    </li> 
 
    <li> 
 
    <div></div> 
 
    </li> 
 
    <li> 
 
    <div></div> 
 
    </li> 
 
    <li> 
 
    <div></div> 
 
    </li> 
 
    <li> 
 
    <div></div> 
 
    </li> 
 
    <li> 
 
    <div></div> 
 
    </li> 
 
    <li> 
 
    <div></div> 
 
    </li> 
 
</ul>

https://jsfiddle.net/ab0asum3/

Source

2017-10-11 blacklight

Il semble y avoir 2 questions:

auto n'est pas une valeur valide pour grid-template-columns - utiliser quelque chose comme 1fr
en utilisant une valeur de pourcentage pour la grid-gap quand aucune hauteur explicite a été définie pour la li ou div

Vous devez utiliser une valeur de pixel pour l'intervalle entre les lignes.

ul { 
 
    border: 2px solid red; 
 
    display: grid; 
 
    grid-gap: 10px 5%; 
 
    grid-template-columns: repeat(4, 1fr); 
 
    list-style-type: none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
div { 
 
    background-color: green; 
 
    padding-top: 100%; 
 
    width: 100%; 
 
}

<ul> 
 
    <li> 
 
    <div></div> 
 
    </li> 
 
    <li> 
 
    <div></div> 
 
    </li> 
 
    <li> 
 
    <div></div> 
 
    </li> 
 
    <li> 
 
    <div></div> 
 
    </li> 
 
    <li> 
 
    <div></div> 
 
    </li> 
 
    <li> 
 
    <div></div> 
 
    </li> 
 
    <li> 
 
    <div></div> 
 
    </li> 
 
    <li> 
 
    <div></div> 
 
    </li> 
 
</ul>

Source

2017-10-11 23:21:31

Je pense que tu as cloué ça. Merci. – blacklight

Je suis encore en train d'apprendre CSS Grid, donc je peux me tromper. L'utilisation de pourcentages vakues sur d'autres éléments sans une hauteur explicitement définie est généralement problématique. Et il semble régler le problème ici. –

-1

Si vous ouvrez les DevTools Chome et inspectez le divs vous verrez que le navigateur est le calcul de leur hauteur 0px. Je ne peux pas dire exactement quel quirk ou quelle norme vous cassez ici, mais si les divs imbriqués n'ont pas de hauteur, ils ne communiqueront rien sur leur parent lis et vous n'aurez rien affiché.

La raison est que Chrome calcule la div imbriqué avec zéro hauteur, ce qui signifie que le parent li aura zéro hauteur. C'est ton pourquoi.

Source

2017-10-11 22:57:55 worc

Firefox et Chrome calculent la div imbriquée avec une hauteur nulle. Mais la hauteur effective devrait également être le résultat du rembourrage, ce que Firefox prend en compte, Chrome ne le fait pas. Je ne suis pas sûr de l'implémentation correcte ici. Merci pour le commentaire, je ne sais pas pourquoi vous étiez downvoted. – blacklight

c'est un cas de bord étrange, peut-être le downvote drive-by n'est pas familier avec elle. vous voudrez peut-être aller chercher des règles de rendu pour FF et Chrome et voir pourquoi ils diffèrent sur les contradictions de remplissage/hauteur nulle. – worc

vous devez utiliser 1fr à la place auto à la taille de vos colonnes:

ul { 
 
    border: 2px solid red; 
 
    display: grid; 
 
    grid-gap: 5%; 
 
    grid-template-columns: 1fr 1fr 1fr 1fr; 
 
    list-style-type: none; 
 
} 
 

 
li:nth-child(4n)~li { 
 
    /* eventually for the gap missing in chrome */ 
 
    margin-top: 5% 
 
} 
 

 
div { 
 
    background-color: green; 
 
    padding-top: 100%; 
 
    width: 100%; 
 
}

<ul> 
 
    <li> 
 
    <div></div> 
 
    </li> 
 
    <li> 
 
    <div></div> 
 
    </li> 
 
    <li> 
 
    <div></div> 
 
    </li> 
 
    <li> 
 
    <div></div> 
 
    </li> 
 
    <li> 
 
    <div></div> 
 
    </li> 
 
    <li> 
 
    <div></div> 
 
    </li> 
 
    <li> 
 
    <div></div> 
 
    </li> 
 
    <li> 
 
    <div></div> 
 
    </li> 
 
</ul>

N ote: pour la technique du carré, contrairement à flex, il peut être créé à partir de la grille enfant et il peut vous permettre de remplir le contenu avec

Source

2017-10-11 23:22:07

Conserver le format des éléments dans une disposition de grille CSS fluide

Répondre

Questions connexes