Pourquoi ma grille CSS déborde-t-elle lors de l'utilisation d'un écart de pourcentage ?

Comprendre le problème de dépassement de pourcentage d'écart de grille CSS

Lors de l'utilisation de grilles CSS, la spécification de la propriété grid-gap sous forme de pourcentage peut parfois conduire à des erreurs inattendues. résultats, notamment un contenu débordant. Dans cet article, nous examinerons les raisons de ce débordement et proposerons une solution pour le résoudre.

Le problème : les écarts en pourcentage et la taille du contenu

Au départ, la valeur en pourcentage de l'écart de grille est calculée par rapport à la hauteur du conteneur de grille. Cependant, cette approche peut entraîner des incohérences dans le comportement des différents navigateurs. Les navigateurs calculent d'abord la hauteur de la grille en fonction de son contenu, ignorant ainsi l'écart en pourcentage. Cela amène le contenu à remplir tout l'espace de la grille, entraînant un débordement en dehors de la grille.

Exemple :

Considérez le code suivant :

.grid {
  display: grid;
  grid-gap: 50%;
  background-color: blue;
}

.grid-1 {
  background-color: red;
}

<div class="grid">
  <div class="grid-1">
    test
  </div>
  <div class="grid-1">
    test
  </div>
  <div class="grid-1">
    test
  </div>
</div>

Solution : Ajuster la hauteur de la grille

Pour résoudre ce problème, nous pouvons ajuster explicitement la hauteur de la grille. Une approche consiste à utiliser la propriété height, en veillant à ce qu'elle soit plus grande que la hauteur totale du contenu :

.grid {
  display: grid;
  grid-gap: 50%;
  background-color: blue;
  height: calc(100% + 50%);
}

Alternativement, nous pouvons utiliser la fonction calc() pour définir la hauteur de la grille en fonction du pourcentage. gap :

.grid {
  display: grid;
  grid-gap: 50%;
  background-color: blue;
  height: calc(100% + 25% * 2);  // 50% divided by 2 for each gap
}

En définissant explicitement la hauteur de la grille, nous nous assurons qu'elle s'adapte à la fois au contenu et à l'écart basé sur le pourcentage, évitant ainsi tout débordement contenu.

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!