Comment la grille CSS peut-elle obtenir des lignes de hauteur égale là où Flexbox échoue ?

Lignes de hauteur égale dans la disposition en grille CSS : une meilleure façon

Bien que Flexbox ne puisse pas prendre en charge des lignes de hauteur égale sur toutes les lignes, CSS Grid offre une solution. En tirant parti de l'unité fr, vous pouvez obtenir cet effet sans effort.

Comment la magie de la disposition en grille se produit

Dans CSS Grid Layout, l'unité fr désigne une longueur flexible qui distribue l'espace libre dans un conteneur de grille . Définir toutes les lignes sur 1fr se traduit par des lignes de hauteur égale.

Cependant, la magie réside dans la définition de fr. Dans les cas où la hauteur du conteneur de grille est indéfinie, les pistes fr (dans ce cas, les lignes) s'adaptent à la hauteur de leur contenu.

Le contenu le plus haut de la grille détermine la hauteur maximale du contenu, qui devient la longueur de 1fr. Ainsi, 1fr crée automatiquement des lignes de hauteur égale en reflétant la hauteur de la « cellule » la plus haute de la grille.

Pourquoi Flexbox n'est pas à la hauteur

Flexbox, bien qu'utile pour les lignes de hauteur égale sur la même ligne , échoue sur plusieurs lignes. Selon la spécification flexbox, la hauteur de chaque ligne est uniquement suffisante pour accueillir les éléments flexibles sur cette ligne. Cette restriction empêche les lignes de hauteur égale entre les lignes.

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!