Comment obtenir des colonnes de largeur égale dans la grille CSS quelle que soit la taille du contenu ?

Obtenir des colonnes de largeur égale dans la grille CSS

Lorsque vous travaillez avec la grille CSS, répartir les éléments uniformément dans les colonnes peut être difficile. Bien que Flexbox propose une approche simple, obtenir le même résultat avec CSS Grid nécessite un peu plus de réflexion.

Question originale :

"Je souhaite afficher des éléments dans un ligne dans des colonnes de même largeur, quel que soit le nombre d'enfants dans la ligne. J'ai essayé d'utiliser CSS Grid, mais j'ai du mal à y parvenir. travail."

Réponse :

La solution couramment suggérée de répétition(3, 1fr) n'est pas tout à fait exacte. Comme indiqué dans la réponse :

"1fr concerne la répartition de l'espace disponible (!). Cela s'interrompt dès que le contenu devient plus grand que la taille de la piste."

Pour garantir la conservation des colonnes leur largeur égale, il est recommandé d'utiliser minmax(0, 1fr) à la place :

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

minmax(0, 1fr) permet aux pistes de grille d'être aussi petites que 0 et aussi grand que 1fr. Cela garantit que les colonnes conservent des largeurs égales. Cependant, cette approche peut provoquer 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érons l'exemple suivant :

<code class="html"><div class="row">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
</div></code>

Avec répétition(3 , 1fr), les colonnes ajusteront leur largeur en fonction de l'espace disponible, ce qui entraînera potentiellement des largeurs différentes. Cependant, l'utilisation de repeat(3, minmax(0, 1fr)) garantira que les trois colonnes auront exactement la même largeur, quelle que soit la taille du contenu.

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!