Lignes de hauteur égale dans la grille CSS
je crois comprendre que cela est impossible à réaliser en utilisant Flexbox, car chaque rangée ne peut être que la hauteur minimale requise pour s'adapter à ses éléments, mais est-ce que cela peut ê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 à travers toutes les lignes, pas seulement par ligne. Fondamentalement, la "cellule" la plus haute devrait dicter la hauteur de toutes les cellules, pas seulement les cellules dans sa rangée.
3 réponses
Réponse Courte
si le but est de créer une grille avec des rangées de hauteur égale, où la cellule la plus haute de la grille fixe la hauteur pour toutes les rangées, voici une solution simple et rapide:
- régler le conteneur sur
grid-auto-rows: 1fr
comment ça marche
Grid Layout fournit une unité pour établir des longueurs flexibles dans un conteneur grid. C'est les fr unité. Il est conçu pour distribuer de l'espace libre dans le conteneur et est quelque peu analogue à la propriété flex-grow dans flexbox.
si vous définissez toutes les lignes dans un conteneur grid à 1fr , disons comme ceci:
grid-auto-rows: 1fr;
... alors toutes les rangées seront de hauteur égale.
ça n'a pas vraiment de sens off-the-bat parce que fr est censé distribuer de l'espace libre. Et si plusieurs rangées ont un contenu avec des hauteurs différentes, alors quand l'espace est distribué, certaines rangées seraient proportionnellement plus petites et plus hautes.
sauf , enfoui profondément dans le quadrillage"
7.2.3. Longueurs flexibles: le
frunité...
quand l'espace disponible est infini (ce qui arrive quand la grille la largeur ou la hauteur du conteneur est indéfinie), les voies de quadrillage flex-sized (
fr) sont dimensionnés en fonction de leur contenu tout en conservant leurs proportions respectives.la taille utilisée de chaque voie de grille de taille variable est calculée en déterminant la taille
max-contentde chaque voie de grille de la taille de flex et en divisant cela taille par le facteur de flex respectif à déterminer une "hypothétique1frtaille."le maximum de ceux-ci est utilisé comme la longueur résolue
1fr(la fraction flex), qui est ensuite multiplié par la flex de chaque piste de grille facteur pour déterminer sa taille définitive.
donc, si je lis ceci correctement, en traitant une grille de taille dynamique (par exemple, la hauteur est indéfinie), les pistes de grille (lignes, dans ce cas) sont dimensionnées à leur contenu.
la hauteur de chaque rangée est déterminée par la plus haute ( max-content ) point de grille.
La hauteur maximale de ces lignes devient la longueur de la 1fr .
c'est comme ça que 1fr crée des lignes de hauteur égale dans un conteneur quadrillé.
pourquoi flexbox n'est pas une option
comme indiqué dans la question, des lignes de hauteur égale 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 spécification flexbox:
dans un conteneur flexible multiligne, la taille transversale de chaque ligne est la taille minimale nécessaire pour contenir les articles flexibles sur la ligne.
en d'autres termes, lorsqu'il y a plusieurs lignes dans un conteneur flexible à base de rangées, la hauteur de chaque ligne (la" taille transversale") est la hauteur minimale nécessaire pour contenir les articles flexibles sur la ligne.
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é.
<div class="flexbox">
<div class="col"><h3>I am listed first in source order.</h3><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
<div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p></div>
<div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
</div>
.flexbox {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
overflow: hidden;
}
.flexbox .col {
flex: 1;
}
.flexbox .col:nth-child(1) {
background: #ccc;
order: 1;
}
.flexbox .col:nth-child(2) {
background: #eee;
order: 0;
}
.flexbox .col:nth-child(3) {
background: #eee;
order: 2;
}
la propriété align-items peut être définie à stretch pour s'assurer qu'ils sont de hauteur égale, mais c'est la valeur par défaut! Donc, nous n'avons pas à le définir.
pour plus d'informations: https://css-tricks.com/fluid-width-equal-height-columns /