Je suppose que cela est impossible à réaliser avec Flexbox, car chaque ligne ne peut être que la hauteur minimale requise pour s'adapter à ses éléments, mais cela peut-il être réalisé en utilisant la nouvelle grille CSS?
Pour être clair, je veux une hauteur égale pour tous les éléments d'une grille sur toutes les lignes, pas seulement pour chaque ligne. Fondamentalement, la "cellule" la plus élevée devrait dicter la hauteur de toutes les cellules, pas seulement les cellules de sa ligne.
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:
grid-auto-rows: 1frGrid Layout fournit une unité pour établir des longueurs flexibles dans un conteneur de grille. Ceci est l' frunité. Il est conçu pour distribuer de l'espace libre dans le conteneur et est quelque peu analogue à la flex-growproprié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 frest 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'
frunité...
Lorsque l'espace disponible est infini (ce qui se produit lorsque la largeur ou la hauteur du conteneur de grille est indéfinie), les
frpistes 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-contenttaille de chaque piste de grille de taille flexible et en divisant cette taille par le facteur flexible respectif pour déterminer une «1frtaille hypothétique ».Le maximum de ceux-ci est utilisé comme
1frlongueur 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 1frcrée des lignes de hauteur égale dans un conteneur de grille.
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:
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-rowque celle de cette ligne était de 2, cela signifie-t-il que la taille de 1fr pour la première ligne est égale à 50px?La réponse courte est que le réglage
grid-auto-rows: 1fr;sur le conteneur de grille résout ce qui a été demandé.https://codepen.io/Hlsg/pen/EXKJba
la source