Grille CSS : Pourcentages par rapport aux unités « fr » : lesquelles dois-je utiliser ?

Pourcentage par rapport aux unités Fr dans la disposition en grille CSS

Comprendre les unités fr

Fonction : Les unités Fr allouent de l'espace libre à l'intérieur un conteneur.

Calcul :Espace libre (après en soustrayant les espaces de la grille) est réparti également entre les colonnes fr.

Compréhension des unités de pourcentage (%)

Fonction : Définit les largeurs de colonne en pourcentage de la largeur du conteneur.

Calcul : La largeur des colonnes est déterminée en divisant la largeur totale par le nombre de colonnes, y compris les largeurs de tous les espaces de la grille.

La différence : débordement par rapport à la distribution

Pourcentage : Les colonnes peuvent déborder en dehors de la largeur du conteneur en raison des longueurs d'unité fixes et espaces vides dans la grille.

Fr : Les colonnes occupent uniquement l'espace libre à l'intérieur du conteneur, sans s'étendre au-delà il. Les espaces de grille n'ont pas d'impact sur l'allocation d'espace libre.

Utilisation du pourcentage avec les espaces de grille

Pour éviter tout débordement avec des largeurs en pourcentage, soustrayez la largeur totale des espaces de grille de la largeur totale du conteneur avant de la diviser par le nombre de colonnes :

grid-template-columns: repeat(12, calc(8.3333% - 9.1667px))

où :

• 8,3333 % est le pourcentage de largeur de chaque colonne sans espaces
• 9,1667px est la largeur totale de 11 espaces de grille ( 10px chacun)

En utilisant des valeurs appropriées pour les largeurs en pourcentage ou en implémentant fr unités, vous pouvez gérer la taille des colonnes et éviter les débordements dans CSS Grid Layout.

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!