Comment la disposition en grille CSS peut-elle obtenir des lignes de même hauteur alors que Flexbox ne le peut pas ?

Création de lignes de même hauteur dans une disposition de grille CSS

Dans le domaine de la mise en page HTML et CSS, obtenir des lignes de même hauteur est un défi commun. Traditionnellement, cela n'était pas réalisable avec Flexbox en raison de son calcul de hauteur basé sur les lignes, où chaque ligne était déterminée par son élément le plus haut. Cependant, l'avènement du CSS Grid Layout offre une solution polyvalente à ce problème.

Solution : CSS Grid Layout avec des unités 1fr

La clé pour créer une hauteur égale rows dans une grille consiste à utiliser l'unité 1fr pour la propriété grid-auto-rows. Cette unité signifie « unité fractionnaire » et représente une longueur flexible à l'intérieur du conteneur de grille.

<br>grid-auto-rows : 1fr;<br>

En définissant la propriété grid-auto-rows sur 1fr pour toutes les lignes, nous demandons au navigateur de répartir équitablement l'espace vertical disponible entre elles. Cela donne à toutes les lignes la même hauteur.

Comment ça marche

La magie derrière 1fr réside dans sa capacité à croître et à diminuer en fonction du contenu qu'il contient. les cellules de la grille. Lorsque le conteneur a une hauteur indéfinie, comme c'est souvent le cas dans les mises en page dynamiques, les pistes de la grille (dans notre cas, les lignes) sont automatiquement redimensionnées pour accueillir le contenu le plus haut.

La hauteur maximale des lignes devient l'équivalent de 1fr, qui est ensuite multiplié par la valeur 1fr attribuée pour déterminer la hauteur finale de chaque rangée. Essentiellement, toutes les lignes héritent de la hauteur de la ligne la plus haute.

Pourquoi Flexbox n'est pas une option viable

Contrairement à la disposition en grille, Flexbox n'offre pas de moyen pour créer des lignes de hauteur égale sur plusieurs lignes. Conformément à la spécification Flexbox, la taille croisée (hauteur) de chaque ligne est limitée à la plus petite hauteur nécessaire pour s'adapter à son contenu.

Ce comportement rend impossible l'obtention de l'effet souhaité avec Flexbox seul. Seule la disposition en grille CSS offre la flexibilité et les fonctionnalités requises pour des lignes de hauteur égale sur toutes les lignes d'une grille.

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!