Comment créer des colonnes de grille CSS de taille égale quel que soit le contenu ?

Colonnes de grille CSS de taille égale

De nombreux programmeurs sont confrontés à des difficultés pour obtenir des colonnes de largeur égale dans les mises en page de grille CSS. Bien que Flexbox simplifie cette tâche, cela peut également être accompli en utilisant CSS Grid.

L'approche la plus courante consiste à utiliser la fonction repeat(), comme dans grid-template-columns: repeat(3, 1fr); . Cependant, ce raccourci peut s'avérer problématique si le contenu dépasse la taille de la piste, car il ne fait que distribuer l'espace disponible. Pour garantir une largeur égale quelle que soit la taille du contenu, utilisez la syntaxe suivante :

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

La propriété minmax() permet aux pistes d'être aussi petites que 0 et aussi grandes que 1fr, garantissant ainsi des colonnes de taille égale. Notez cependant que cela peut provoquer des débordements si le contenu est trop volumineux ou ne peut pas être enveloppé.

Voici un exemple qui illustre la différence :

• repeat(3, 1fr) : Si le contenu dépasse la taille de la piste, les colonnes peuvent avoir des largeurs inégales.
• repeat(3, minmax(0, 1fr)) : les colonnes restent toujours de même largeur, mais des débordements peuvent se produire.

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!