Comment la grille CSS peut-elle obtenir des lignes de hauteur égale alors que Flexbox ne le peut pas ?

Lignes de hauteur égale dans la disposition en grille CSS

L'utilisation de Flexbox pour obtenir des lignes de hauteur égale n'est pas pratique car les hauteurs de ligne ne peuvent accueillir que les éléments qu'elles contiennent. Cependant, CSS Grid propose une solution.

Le principe

Pour créer une grille avec des lignes de hauteur égale, en définissant toutes les lignes sur grid-auto-rows : 1fr est la clé.

La Technique

L'unité fr dans Grid Layout alloue l'espace de manière égale en fonction de l'espace libre disponible à l'intérieur du conteneur. Lorsqu'elle est appliquée aux lignes (grid-auto-rows : 1fr), chaque ligne revendique une partie égale de cet espace libre.

La raison derrière la magie

Les spécifications de disposition en grille indiquent que lorsqu'il s'agit de une grille de taille flexible (hauteur indéfinie), les pistes (rangées) de la grille adoptent la hauteur de leur contenu. L'élément le plus haut de chaque ligne détermine la hauteur de toutes les lignes. Cette hauteur maximale devient la longueur pour 1fr, ce qui conduit à des hauteurs de rangée égales.

Pourquoi Flexbox ne le coupe pas

Flexbox autorise uniquement des rangées de hauteur égale dans la même rangée, ce qui la rend impropre au croisement -égalisation des rangées. Selon la spécification Flexbox, dans les conteneurs multilignes, la hauteur de la ligne est déterminée par la hauteur minimale requise pour accueillir ses articles flexibles.

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!