Comment obtenir des colonnes de même largeur dans une grille CSS ?

Colonnes de même largeur dans la grille CSS

Flexbox est reconnu pour sa capacité à afficher des éléments dans des colonnes de même largeur. Cependant, CSS Grid offre également des options de mise en page flexibles, ce qui soulève la question de savoir comment obtenir le même effet.

La structure HTML fournie comprend un élément de ligne avec plusieurs éléments d'élément enfant. L'objectif est de répartir ces éléments uniformément sur la ligne, quel que soit le nombre d'éléments présents.

Une solution courante suggérée pour CSS Grid consiste à utiliser repeat(3, 1fr). Même si cela permet d'obtenir partiellement l'effet souhaité, cela peut échouer lorsque le contenu dépasse la taille de la piste. En effet, 1fr signifie la répartition de l'espace disponible, ce qui ne garantit pas des largeurs de colonnes égales dans tous les cas.

Pour garantir une égalité exacte, le code CSS suivant doit être utilisé à la place :

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

minmax(0, 1fr) restreint les pistes de la grille à une taille minimale de 0 et une taille maximale de 1fr. Cela garantit que toutes les colonnes garderont la même largeur, même si le contenu déborde.

Voici un exemple pour illustrer la différence entre répéter(3, 1fr) et répéter(3, minmax(0, 1fr)) :

<code class="html"><div class="container">
  <div class="row" style="grid-template-columns: repeat(3, 1fr)">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item overflow">Very long text that overflows the column</div>
  </div>

  <div class="row" style="grid-template-columns: repeat(3, minmax(0, 1fr))">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item overflow">Very long text that overflows the column</div>
  </div>
</div></code>

Avec répétition(3, 1fr), l'élément de débordement sortira de sa colonne. En revanche, repeat(3, minmax(0, 1fr)) garantit que toutes les colonnes restent égales, avec le contenu de débordement visible ci-dessous.

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!