Pourquoi ma grille déborde-t-elle lors de l'utilisation de « grid-template-columns » avec des pourcentages ?

La grille déborde du corps avec 100 % de colonnes de modèle de grille :

Considérez le 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;
}

.left {
  border: 2px solid red;
}

.right {
  border: 2px solid red;
}</code>

<code class="html"><div class='parent'>
  <div class='left'>LEFT</div>
  <div class='right'>RIGHT</div>
</div></code>

Avec ces réglages, si la position est fixe, le div parent déborde vers le côté droit du corps. Le problème, cependant, ne réside pas dans la largeur : 100 %, mais dans le modèle de grille.

Solution :

Le problème se produit parce que le modèle de grille divise les éléments disponibles espace en 40 % et 60 %, laissant 5 px pour l'espace de la grille. Cela dépasse 100%. Pour résoudre ce problème, utilisez plutôt l'unité fr :

<code class="css">.parent {
  grid-template-columns: 4fr 6fr;
}</code>

Avec ce changement, les colonnes diviseront l'espace restant après avoir pris en compte l'écart de 5 px. Le div parent s'intégrera ainsi dans le corps, même avec la position : fixe.

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!