Pourquoi la hauteur de mon élément de grille CSS ne double-t-elle pas la hauteur du conteneur parent ?

Grille CSS : confusion dans le calcul de la hauteur des éléments

Vous rencontrez un problème avec la hauteur d'un élément de grille CSS, en particulier le .gridItem , n'étant pas calculé comme prévu. Dans cette configuration de grille :

.gridContainer {
  height: 100px;
  grid-template-rows: 1fr;
}

.gridItem {
  height: 200%;
}

L'intention est que .gridItem soit deux fois la hauteur de son parent, .gridContainer. Cependant, le résultat semble plutôt prendre en compte la hauteur de l'élément enfant.

Comprendre la relation parent-enfant dans la grille CSS

Lorsque vous travaillez avec des grilles CSS, il est crucial de comprendre les relation parent-enfant. Dans ce cas, l'élément parent du .gridItem n'est pas directement le .gridContainer mais plutôt la piste de grille qui le contient.

Lorsque vous spécifiez grid-template-rows: 1fr;, vous créez une piste avec un flexible hauteur qui occupe 1 unité fractionnaire de l’espace disponible du parent. Puisque le parent a une hauteur fixe de 100 px, la hauteur de la piste devient 100 px.

Par conséquent, même si .gridItem a une hauteur : 200 %, il fait référence à la hauteur de sa piste parent, qui est de 100 px. Cela explique pourquoi la hauteur de .gridItem est effectivement deux fois la hauteur de la piste au lieu de celle du conteneur parent.

Correction : définition de hauteurs explicites sur le conteneur et la piste

Pour résoudre ce problème, vous devez spécifier une hauteur fixe à la fois sur le .gridContainer et sur la piste de grille. Cela établit une relation parent-enfant claire et permet au pourcentage de hauteur de .gridItem de fonctionner correctement.

.gridContainer {
  height: 100px;
  grid-template-rows: 100px;
}

.gridItem {
  height: 200%;
}

Avec cet ajustement, la hauteur de .gridItem devrait maintenant être deux fois la hauteur de .gridContainer, comme prévu .

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!