Réponse courte
Si l'objectif est de créer une grille avec des lignes de hauteur égale, où la cellule la plus haute de la grille définit la hauteur de toutes les lignes, voici une solution simple et rapide:
- Réglez le conteneur sur
grid-auto-rows: 1fr
Comment ça fonctionne
Grid Layout fournit une unité pour établir des longueurs flexibles dans un conteneur de grille. Ceci est l' fr
unité. Il est conçu pour distribuer de l'espace libre dans le conteneur et est quelque peu analogue à la flex-grow
propriété dans flexbox.
Si vous définissez toutes les lignes d'un conteneur de grille sur 1fr
, disons comme ceci:
grid-auto-rows: 1fr;
... alors toutes les lignes auront la même hauteur.
Cela n'a pas vraiment de sens dès le départ car il fr
est censé distribuer de l'espace libre. Et si plusieurs lignes ont du contenu avec des hauteurs différentes, alors lorsque l'espace est distribué, certaines lignes seront proportionnellement plus petites et plus grandes.
Sauf que cette petite pépite est enfouie profondément dans la spécification de la grille:
7.2.3. Longueurs flexibles: l' fr
unité
...
Lorsque l'espace disponible est infini (ce qui se produit lorsque la largeur ou la hauteur du conteneur de grille est indéfinie), les fr
pistes de grille flex-size ( ) sont dimensionnées en fonction de leur contenu tout en conservant leurs proportions respectives.
La taille utilisée de chaque piste de grille de taille flexible est calculée en déterminant la max-content
taille de chaque piste de grille de taille flexible et en divisant cette taille par le facteur flexible respectif pour déterminer une « 1fr
taille hypothétique ».
Le maximum de ceux-ci est utilisé comme 1fr
longueur résolue (la fraction de flex), qui est ensuite multipliée par le facteur de flex de chaque piste de grille pour déterminer sa taille finale.
Donc, si je lis ceci correctement, lorsque je traite une grille de taille dynamique (par exemple, la hauteur est indéfinie), les pistes de la grille (lignes, dans ce cas) sont dimensionnées en fonction de leur contenu.
La hauteur de chaque ligne est déterminée par l' max-content
élément de grille le plus haut ( ).
La hauteur maximale de ces lignes devient la longueur de 1fr
.
C'est ainsi que 1fr
crée des lignes de hauteur égale dans un conteneur de grille.
Pourquoi Flexbox n'est pas une option
Comme indiqué dans la question, les lignes de hauteur égale ne sont pas possibles avec flexbox.
Les éléments Flex peuvent être de hauteur égale sur la même ligne, mais pas sur plusieurs lignes.
Ce comportement est défini dans la spécification flexbox:
6. Lignes flexibles
Dans un conteneur flexible multi-lignes, la taille transversale de chaque ligne est la taille minimale nécessaire pour contenir les éléments flexibles sur la ligne.
En d'autres termes, lorsqu'il y a plusieurs lignes dans un conteneur flexible basé sur des lignes, la hauteur de chaque ligne (la «taille croisée») est la hauteur minimale nécessaire pour contenir les éléments flexibles sur la ligne.
grid-auto-row
que celle de cette ligne était de 2, cela signifie-t-il que la taille de 1fr pour la première ligne est égale à 50px?