[Résolu] Grid layout : bug avec "grid-row: span" ou comportement voulu

Bonjour à tous,

En imaginant que l'on code une grille et que les items peuvent prendre 2, 3 ou 4 fois la hauteur de la ligne de base :

.r2 {
  grid-row: span 2;
}
.r3 {
  grid-row: span 3;
}
.r4 {
  grid-row: span 4;
}

Alors, on savait déjà que si tous les éléments de la ligne sont dotés de la même valeur de span cela annule - si l'on peut dire - la hauteur de chacun pour rester aligné sur la ligne de base.

Mais si un élément de la grille avec un span 2 côtoie une élément avec un span 4, le span 2 n'a pas d'effet. Voir sur ce CodePen, réduisez la grille sur deux colonnes pour constater que div.r2 "s'annule" lorsqu'il est au côté de div.r4.

C'est le comportement attendu par grid layout ça ?

Bingo ! Pour cette démo j'avais utilisé un min-height sur les items.

Du coup, suite à ta remarque, je m'aperçois que si je fais ainsi :

grid-auto-rows: minmax(0, 1fr)

Je garde l'alignement des spans liés à grid-row quelque soit la configuration (édit : par contre, ce n'est valable quasiment que pour les démos, pour les autres cas ce n'est pas vraiment top avec un forçage des items obligatoirement alignés sur la grille, je crée donc une classe ".row-defines" uniquement pour ce comportement).

Merci Raphaël.
Modifié par Olivier C (06 Jan 2023 - 19:34)