Maison > interface Web > tutoriel CSS > Comment obtenir des colonnes de même largeur dans une grille CSS ?

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

Linda Hamilton
Libérer: 2024-11-05 10:22:02
original
419 Les gens l'ont consulté

How to Achieve Equal-Width Columns in CSS Grid?

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>
Copier après la connexion

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>
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal