Disposition de la grille CSS : pourcentages par rapport aux unités « fr » – Quelle est la différence ?

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

Lors de la configuration d'une disposition de grille avec CSS, le choix des unités pour spécifier les tailles de colonnes et de lignes peut avoir un impact sur la le comportement de la mise en page. Deux unités couramment utilisées sont les pourcentages et les unités fractionnaires (fr). Examinons les principales différences entre ces unités dans le contexte de la disposition de grille CSS.

Unités fr

L'unité fr représente des unités fractionnaires de l'espace libre disponible dans le conteneur de grille après avoir pris en compte les espaces de grille. . Essentiellement, cela permet aux colonnes ou aux lignes d’occuper une quantité proportionnelle de l’espace restant. L'espace libre est réparti également entre les colonnes ou les lignes avec des valeurs fr.

Cela garantit que la taille des éléments évolue de manière réactive à mesure que le conteneur de grille se redimensionne. Les espaces de grille, définis par grid-column-gap et grid-row-gap, sont soustraits de l'espace disponible avant de calculer les valeurs fr.

Unités de pourcentage

Unités de pourcentage, par contre , spécifiez la largeur des colonnes ou des lignes sous forme de pourcentage de l'ensemble du conteneur de grille, y compris les espaces de grille. Cela signifie que les tailles des éléments sont fixes et qu'ils ne s'ajustent pas dynamiquement en fonction de la taille du conteneur.

Par conséquent, il est possible de se retrouver dans des situations où la largeur totale des colonnes, y compris les espaces de la grille, dépasse la largeur du conteneur de grille. Cela peut faire déborder la mise en page du conteneur.

Exemple

Pour illustrer la différence de comportement, considérons la disposition de grille suivante :

.grid {
  display: grid;
  grid-template-columns: repeat(12, calc(100% / 12));
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

Dans ce cas, pourcentage les unités sont utilisées pour définir les largeurs de colonnes. Par conséquent, la largeur totale des colonnes, y compris les espaces de la grille (11 espaces avec un espace de 10 px), dépasse la largeur du conteneur de grille, provoquant un débordement de la mise en page.

Cependant, si nous passons à l'utilisation fr à la place :

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

Les colonnes occupent désormais des quantités proportionnelles de l'espace libre disponible, et les espaces de la grille sont soustraits de l'espace total avant de calculer l'espace libre disponible. valeurs fr. Il en résulte une mise en page réactive qui s'ajuste dynamiquement en fonction de la taille du conteneur de grille.

Conclusion

Le choix de l'unité appropriée pour votre disposition de grille dépend du comportement souhaité. Les unités de pourcentage conviennent lorsque vous souhaitez des tailles fixes, tandis que les unités fr sont avantageuses lorsque vous avez besoin de mises en page réactives qui évoluent en fonction de l'espace disponible. Comprendre la différence entre ces unités et leur impact sur la mise en page est crucial pour créer des mises en page de grille CSS efficaces et visuellement agréables.

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!