Lignes de hauteur égale dans la disposition de grille CSS

101

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.

Hlsg
la source

Réponses:

188

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' 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' 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 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 « 1fr taille 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.


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.

Michael Benjamin
la source
Dans le paragraphe mentionné, que signifie exactement cette partie: "et en divisant cette taille par le facteur flexible respectif pour déterminer une" taille hypothétique de 1fr ". Par exemple, si la taille la plus élevée de la première ligne d'un conteneur de grille était de 100px et 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?
Od Chan
15

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

Hlsg
la source