Lignes de hauteur égale dans la disposition de grille CSS
Je suppose que cela est impossible à utiliser avec Flexbox, car chaque rangée ne peut être que la hauteur minimale requise pour s'adapter à ses éléments, mais cela peut-il être réalisé avec 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 haute devrait dicter la hauteur de toutes les cellules, et pas seulement des cellules de sa rangée.
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 pour toutes les lignes, voici une solution simple et rapide:
- Définissez le conteneur sur _
grid-auto-rows: 1fr_
Comment ça fonctionne
Grid Layout fournit une unité permettant d'établir des longueurs flexibles dans un conteneur de grille. C'est l'unité fr . Il est conçu pour répartir l’espace libre dans le conteneur et est quelque peu analogue à la propriété _flex-grow_ de 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 parce que fr est censé distribuer de l'espace libre. Et si plusieurs rangées ont un contenu de hauteurs différentes, lorsque l’espace est distribué, certaines rangées sont proportionnellement plus petites et plus hautes.
Sauf , enfoui au plus profond de la grille est ce petit pépin:
7.2.3. Longueurs flexibles: l'unité
fr...
Lorsque l’espace disponible est infini (ce qui se produit lorsque la largeur ou la hauteur du conteneur de la grille est indéfinie), les tracés de la grille de taille variable (
fr) sont dimensionnés à leur contenu tout en conservant leurs proportions respectives.La taille utilisée de chaque piste de grille de taille flex est calculée en déterminant la taille _
max-content_ de chaque piste de grille de taille flex et en divisant cette taille par le facteur de flexion respectif pour déterminer une "taille hypothétique _1fr_".Le maximum de ceux-ci est utilisé comme longueur résolue _
1fr_ (fraction de flexion), qui est ensuite multipliée par le facteur de flexion de chaque piste de la grille pour déterminer sa taille finale.
Ainsi, si je lis bien, lorsqu’il s’agit d’une grille de taille dynamique (par exemple, la hauteur est indéfinie), les pistes de grille (les lignes, dans ce cas) sont dimensionnées à leur contenu.
La hauteur de chaque ligne est déterminée par l'élément de grille le plus élevé ( max-content ).
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 rangées de hauteur égale ne sont pas possibles avec flexbox.
Les éléments flexibles peuvent avoir la même hauteur sur la même ligne, mais pas sur plusieurs lignes.
Ce comportement est défini dans la spécification flexbox:
Dans un conteneur Flex multiligne, la taille croisée de chaque ligne est la taille minimale nécessaire pour contenir les éléments flex sur la ligne.
En d'autres termes, lorsqu'il y a plusieurs lignes dans un conteneur Flex basé sur une ligne, la hauteur de chaque ligne (la "taille de la croix") est la hauteur minimale nécessaire pour contenir les éléments flex sur la ligne.
La réponse courte est que le réglage de grid-auto-rows: 1fr; sur le conteneur de grille résout ce qui était demandé.
Vous pouvez utiliser des pourcentages pour grid-template-rows comme si
grid-template-rows: 50% 50%;