Quelle est la principale différence entre « fr » et les unités de pourcentage dans la disposition en grille CSS pour les largeurs de colonnes ?

La différence entre les unités de pourcentage et fr dans la disposition en grille CSS

Lors de l'utilisation de la disposition en grille CSS, il est important de comprendre la différence entre les unités de pourcentage et fr lors de la définition de la largeur de colonnes.

Unités fr

L'unité fr représente "unité fractionnaire", et cela ne fonctionne qu'avec l'espace libre disponible dans le conteneur. Lors de l'utilisation des unités fr, le navigateur calcule la largeur de chaque colonne en fonction de l'espace restant après avoir pris en compte les espaces de la grille.

Par exemple, dans le code ci-dessous, le conteneur de grille est divisé en 12 colonnes, chacune occupant un espace libre égal dans le conteneur :

grid-template-columns: repeat(12, 1fr);

Unités de pourcentage

Unités de pourcentage, sur d'autre part, définissez la largeur de chaque colonne en pourcentage de la largeur totale du conteneur. Cela signifie que la largeur de chaque colonne est calculée en fonction de la largeur réelle du conteneur.

Par exemple, dans le code ci-dessous, chaque colonne a une largeur de 8,33333 %, soit 100 % divisé par 12 :

grid-template-columns: repeat(12, calc(100% / 12));

Pourquoi les pourcentages provoquent le débordement des colonnes

La principale différence entre les unités fr et de pourcentage, c'est la façon dont ils gèrent les écarts de grille. Avec les unités fr, les espaces de grille sont soustraits de l'espace libre du conteneur avant que les largeurs de colonnes ne soient calculées. Cela garantit que les colonnes ne dépassent pas la largeur du conteneur.

Cependant, avec les unités de pourcentage, des espaces de grille sont ajoutés aux largeurs des colonnes. Cela signifie que même si la largeur totale des colonnes peut être égale à 100 %, l'ajout d'espaces dans la grille peut faire déborder les colonnes de la largeur du conteneur.

Pour résoudre ce problème, vous pouvez soit utiliser les unités fr ou ajustez les calculs de pourcentage pour tenir compte des écarts de grille.

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!