Pourquoi mon conteneur de grille déborde-t-il lors de la définition de « grid-template-columns » sur 100 % ?

Pourquoi l'affichage de la grille avec 100 % dans les colonnes du modèle de grille dépasse la largeur du corps

Lors de l'utilisation d'une grille CSS, il est important de comprendre l'impact de définir la propriété grid-template-columns à 100 % et sa relation avec la position du conteneur parent. Examinons le problème et sa solution.

Considérez l'extrait de code suivant :

<code class="css">.parent {
  position: fixed;
  width: 100%;
  left: 0;
  top: 14px;
  display: grid;
  grid-template-columns: 40% 60%;
  grid-gap: 5px;
  background: #eee;
}</code>

Avec cette configuration, vous pouvez rencontrer un problème où le conteneur parent s'étend au-delà de la fenêtre d'affichage de droite. côté lorsque la position est réglée sur fixe. Cela n'est pas dû au fait que la largeur est définie sur 100 %, mais plutôt à la combinaison des valeurs de grille-modèle-colonnes spécifiées et de l'écart de grille.

Le problème survient parce que la propriété grille-modèle-colonnes divise l'espace disponible en deux colonnes, définies respectivement sur 40 % et 60 % de la largeur du conteneur parent. De plus, l'écart de grille de 5 pixels introduit un espace supplémentaire entre les colonnes. Par conséquent, l'espace total alloué aux deux colonnes plus l'espace dépasse 100 %, provoquant un débordement du conteneur parent sur le côté droit.

Pour résoudre ce problème, vous devez éviter de spécifier des pourcentages fixes pour la grille. colonnes et utilisez à la place l’unité fr. L'unité fr est une unité de dimensionnement basée sur des fractions qui vous permet de répartir l'espace restant après avoir tenu compte des largeurs et des espaces spécifiés.

Voici un exemple avec le code ajusté :

<code class="css">.parent {
  position: fixed;
  width: 100%;
  left: 0;
  top: 14px;
  display: grid;
  grid-template-columns: 4fr 6fr;
  grid-gap: 5px;
  background: #eee;
}</code>

Dans ce code révisé, la propriété grid-template-columns est définie sur 4fr 6fr, indiquant que la première colonne doit avoir une largeur de 4 unités et que la deuxième colonne doit avoir une largeur de 6 unités, avec l'espace restant est divisé proportionnellement entre eux. Cela garantit que le conteneur parent ne dépassera pas ses limites, quelle que soit sa position.

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!