[Résolu] Placer un élément sur la dernière ligne dans GRID auto-fill

Bonjour,

J'ai une grille en auto-fill avec un nombre d'éléments inconnu.

Je dois placer un élément sur la dernière ligne et lui faire occuper tout l'espace de la colonne, cela quelle que soit la taille de la fenêtre redimensionnée ou non.

figure {display: grid; grid-template-columns: repeat(auto-fill,110px); grid-template-rows: auto; gap: 1px; place-content: start}

figure > img:not([tabindex]):last-child {display: block; grid-column: 1/-1; grid-row: -1/-1 ; padding: 20px 0; outline: none}

Je pense que grid-row: -1/-1 demande le placement sur la dernière rangée mais cela ne fonctionne pas.

6 éléments, la place d'en afficher 3, mon élément :last-child s'affiche sur la deuxième ligne, pas la troisième.

Par contre grid-column: 1/-1 fonctionne bien, l'élément occupe toute la largeur possible.

Avez-vous une solution ?

Merci d'avance.

Bonjour,

pour remettre à la fin d'une grille (flex/grid) un élément, la règle order conviendra. La valeur par défaut est zéro, alors en appliquant :order:1; à un élément il sera afficher derrière les autres. order:-1; le mettra en première position.

Pour mettre en fin de colonne un élément dans une grille (grid) , ce sera grid-column-end:-1;.
- En haut fin de ligne : grid-row:1;grid-column-end:-1;
- En dernier fin de ligne: order:1;grid-column-end:-1;

Pour remplir les trous grid-auto-flow:row dense;

https://codepen.io/gc-nomade/pen/YPyPBwX

MDN:

https://developer.mozilla.org/fr/docs/Web/CSS/order

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end

https://developer.mozilla.org/fr/docs/Web/CSS/grid-auto-flow#dense
Modifié par gcyrillus (14 Jul 2025 - 08:48)

Bonjour gcyrillus,

Encore merci pour le suivi.

Grâce à ta science une variante du carrousel avec affichage des vignettes au-dessus de la grande photo, cela bien responsive.

Voir le codepen vite fait.

Je coche Résolu.
Modifié par boteha_2 (14 Jul 2025 - 14:25)