Atteindre les colonnes de largeur égale dans la grille CSS

lorsque vous travaillez avec la grille CSS, la distribution d'éléments uniformément entre les colonnes peut être difficile. Alors que Flexbox offre une approche simple, atteindre le même résultat avec la grille CSS nécessite un peu plus de considération. travailler. "

Réponse:

La solution couramment suggérée de répéter (3, 1fr) n'est pas entièrement exacte. Comme indiqué dans la réponse:

"1fr concerne la distribution de l'espace disponible (!). Cela se casse dès que le contenu devient plus grand que la taille de la piste." pour garantir que les colonnes conservent leur largeur égale Minmax (0, 1fr));

Minmax (0, 1fr) permet aux pistes de grille d'être aussi petites que 0 et aussi grandes que 1fr. Cela garantit que les colonnes maintiennent des largeurs égales. Cependant, cette approche peut entraîner un débordement de contenu s'il dépasse la largeur de la colonne.

pour une démonstration visuelle de la différence entre ces approches, considérez l'exemple suivant:

grid-template-columns: repeat(3, minmax(0, 1fr));