Réponse Courte
Si l'objectif est de créer un réseau avec une égale hauteur des lignes, où le plus grand de la cellule dans la grille définit la hauteur pour toutes les lignes, voici une solution rapide et simple:
- Mettre le récipient d'
grid-auto-rows: 1fr
Comment ça marche
Présentation de la grille fournit un logement pour l'établissement flexible longueurs dans une grille contenant. C'est l' fr unité. Il est conçu pour distribuer de l'espace libre dans le conteneur et est quelque peu analogue à l' flex-grow propriété dans flexbox.
Si vous définissez toutes les lignes dans une grille conteneur 1fr, disons le comme ceci:
grid-auto-rows: 1fr;
... puis toutes les lignes seront égale hauteur.
Il n'est pas vraiment hors-la-chauve-souris, car fr est censé distribuer de l'espace libre. Et si plusieurs lignes ont un contenu avec des hauteurs différentes, puis, quand l'espace est distribué, quelques lignes seraient proportionnellement plus petit et plus grand.
Sauf, enfoui au plus profond dans la grille de spécification est cette petite pépite:
7.2.3. Flexible Longueur: l' fr
unité
...
Lorsque l'espace disponible est infini (ce qui arrive lorsque la grille
conteneur largeur ou de la hauteur est à durée indéterminée), flex-taille moyenne (fr) de la grille pistes sont
de la taille de leur contenu, tout en conservant leurs proportions respectives.
La taille utilisée de chaque flex-taille de la grille de piste est calculée en déterminant
l' max-content de la taille de chaque flex-taille de la grille de suivi et de diviser le résultat
la taille par le flex facteur pour déterminer un "hypothétique 1fr
la taille".
Le maximum de celles-ci est utilisé comme résolu 1fr de la longueur (la
flex fraction), qui est ensuite multiplié par chaque cellule de la grille de la piste flex
facteur pour déterminer sa taille définitive.
Donc, si je suis en train de lire ceci correctement, lorsque vous traitez avec un dynamiquement la taille de la grille (par exemple, la hauteur est à durée indéterminée), la grille de pistes (lignes, dans ce cas) sont de taille à leur contenu.
La hauteur de chaque ligne est déterminée par la plus haute (max-content) de la grille de l'élément.
La hauteur maximale de ces lignes devient la longueur de l' 1fr.
C'est combien de 1fr crée la même hauteur des lignes dans une grille contenant.
Pourquoi flexbox n'est pas une option
Comme indiqué dans la question, l'égalité de la hauteur des lignes ne sont pas possibles avec flexbox.
Flex éléments peut être égale hauteur, sur la même ligne, mais pas sur plusieurs lignes.
Ce comportement est défini dans la flexbox spec:
6. Lignes Flex
Dans un multi-ligne flex conteneur, la croix de la taille de chaque ligne est la taille minimale nécessaire pour contenir le flex éléments sur la ligne.
En d'autres termes, lorsqu'il y a plusieurs lignes dans une base de lignes flex conteneur, la hauteur de chaque ligne (de la "croix" taille") est la hauteur minimale nécessaire pour contenir le flex éléments sur la ligne.
