Je suis en train de faire une galerie d'images, et je veux des images prendre la moitié de la hauteur et la moitié de la largeur disponible dans le récipient, donc je l'ai fait quelque chose comme ceci:colonnes grille étirée lors de l'utilisation des unités fr
* {
padding: 0;
margin: 0;
}
div {
height: 200px;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
}
div > figure > img {
width: 100%;
height: 100%;
object-fit: cover;
}<div>
<figure>
<img src="http://lorempicsum.com/futurama/327/100/1">
</figure>
<figure>
<img src="http://lorempicsum.com/futurama/427/200/2">
</figure>
<figure>
<img src="http://lorempicsum.com/futurama/527/300/3">
</figure>
<figure>
<img src="http://lorempicsum.com/futurama/627/200/4">
</figure>
</div>maintenant, ce que je ne comprends pas pourquoi mes images ne sont pas 100px élevé? L'unité fr n'est-elle pas censée distribuer l'espace uniformément entre mes figure s? Pourquoi ne se comporte-t-il pas de la même façon que si je le faisais grid-template-rows: repeat(2, 100px); ou grid-template-rows: repeat(2, 50%);?
Modifier
Je viens de tombé sur this post où il est dit
L'unité de fr remplit l'espace disponible, mais il est jamais plus petit que le contenu de la ligne ou la colonne
Mais est-ce que cela signifie que je ne peux pas utiliser fr unités dans ce cas?
Un réglage initial sur les éléments de la grille est 'min-height: auto'. Cela signifie qu'un élément de grille ne peut pas être plus petit que la taille de son contenu. Les hauteurs de vos images (100px, 200px, 300px) forcent les éléments de la grille, lorsqu'ils sont empilés, à dépasser la hauteur du conteneur (200px). Remplacer la valeur par défaut 'min-height'. Ajoutez 'min-height: 0' à vos éléments de la grille (' figure'). https://jsfiddle.net/yL74vx2s/ –