Comment créer des colonnes de même largeur avec une grille CSS quelle que soit la taille du contenu ?

Création de colonnes de même largeur avec une grille CSS

Vous souhaitez afficher les enfants d'un élément de ligne dans un nombre égal de colonnes, quel que soit le nombre de colonnes. le nombre d'enfants. Bien que Flexbox puisse facilement accomplir cela, CSS Grid présente un défi différent. Cet article fournit une solution pour y parvenir en utilisant CSS Grid.

Solution

La première tentative courante consiste à utiliser repeat(3, 1fr) comme valeur pour la grille -propriété template-columns. Cependant, 1fr calcule la répartition de l'espace en fonction de l'espace disponible. Cette limitation est problématique lorsque le contenu dépasse la taille de la piste, empêchant les colonnes de déborder et ajustant leur largeur en conséquence. Les colonnes partielles dont le contenu est tronqué peuvent devenir inégales.

Pour garantir une égalité exacte en largeur de colonne, vous devez utiliser la règle suivante :

<code class="css">grid-template-columns: repeat(3, minmax(0, 1fr));</code>

minmax(0, 1fr) spécifie que les pistes de grille peuvent avoir une taille minimale de 0 et une taille maximale arbitraire de 1fr. Cela garantit que les colonnes auront toujours la même largeur et accueilleront le contenu qui dépasse la taille de la piste.

Gardez à l'esprit que l'activation du débordement de contenu peut conduire à des résultats visuels différents en fonction du comportement par défaut du navigateur, de la taille du contenu ou espace disponible. L'exemple fourni dans la question illustre la différence entre les deux approches : répéter(3, 1fr) versus répéter(3, minmax(0, 1fr)).

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!