Grid layout : cibler directement une rangée

Bonjour,

Dans mes petits tests pour me familiariser avec grid layout je cherchais à reproduire un équivalent à flex-shrink pour avoir toujours le footer collé en bas, et j'ai trouvé :

grid-template-rows: auto auto 1fr; /* permet à 'main' (3ème rangée) d'occuper tout l'espace disponible */

Exemple en ligne

Mais ma question est celle-ci : comment cibler directement cette troisième ligne en évitant de définir les deux premières (ben oui, parce qu'imaginons que je cherche à cibler la 25ème rangée ) ?

J'ai vu passer des syntaxes entre crochets, mais je ne sais pas comment nommer la rangée. J'avais notamment tenté :

grid-template-rows: [row3-start] 1fr [row3-end];

... mais sans résultat.

PS : sur mon code d'exemple j'utilise Stylus et j'ai conscience qu'il faut échapper les crochets sur ce préprocesseur (qui est en mal de support hélas).
Modifié par Olivier C (25 Oct 2018 - 02:32)

Hello Olivier,

Olivier C a écrit :

J'ai vu passer des syntaxes entre crochets, mais je ne sais pas comment nommer la rangée. J'avais notamment tenté :

grid-template-rows: [row3-start] 1fr [row3-end];

... mais sans résultat.

Attention, tu confonds :
- rangées (Grid Track) qui représente une piste de cellules
- ligne (Grid Line) qui n'est qu'une séparation virtuelle entre deux Tracks

Les crochets symbolisent une ligne et non une rangée.

Je pense que pour désigner ta 3è rangée, tu peux soit :
1- placer explicitement ton <footer> en grid-row: 3; (et en grid-column: 1 / -1 si tu veux l'étaler tout du long).
2- créer une area avec grid-template-areas: "." "." "footer" et y placer ton élément <footer> dans grid-area: footer.
3- te servir des lignes nommées en plaçant <footer> en grid-row: row3-start / row3-end;

Olivier C a écrit :

PS : sur mon code d'exemple j'utilise Stylus

... D'autant plus que, sauf erreur de ma part, Stylus n'est plus maintenu (j'ai cru voir passer un twitt il y a quelques semaines)
Modifié par Raphael (25 Oct 2018 - 09:09)

Olivier C a écrit :
Merci pour ces explications. Après avoir testé tes différentes solutions celle-ci s'est avérée être celle que je recherchais :

footer {
  grid-row: 4;
}

Edit : a non pardon ça ne marche pas comme prévu (d'ailleurs mon footer était sur la ligne 5).

"Techniquement", il se trouve entre la ligne 4 et la ligne 5, c'est à dire sur la rangée 4
(Sinon, c'est qu'il y a autre chose qui interfère)

Attention, si tu places en "semi-explicite", c'est à dire avec grid-row *ou* grid-column, l'algorithme de placement est un peu tordu.
Il vaut mieux placer avec grid-row *et* grid-column en général.
Modifié par Raphael (25 Oct 2018 - 11:26)

Je viens de jeter un oeil à ton Codepen.

Tu as volontairement choisi deux types de placements différents (voire contradictoires) pour ton footer ?
(tu as à la fois grid-area footer et grid-row 4)

A ta place je n'en choisirais qu'un seul des deux :
- soit grid-area pour placer systématiquement footer dans l'emplacement prévu, quel que soit la ligne ou rangée
- soit grid-row (à qui j'ajouterais grid-column) pour le placer systématiquement en 4è rangée

Ne connaissant pas tes objectifs, je ne peux pas te conseiller l'un ou l'autre, mais en général grid-area est plus malléable en responsive quand le gabarit change.
Modifié par Raphael (25 Oct 2018 - 11:45)

En fait il n'y a que le grid-area, le grid-row est commenté. Pour le reste ça fonctionne, c'est juste que je me fais la main sur les grids pour les intégrer à mon framework auparavant basé sur flexbox.

Pour Stylus, il n'est plus maintenu depuis deux ans, mais je le préfère encore aujourd'hui à Sass que j'employais précédemment. De toute facon, Sass lui aussi n'a en réalité qu'un ou deux contributeurs principaux sur lesquels tout repose (déjà pour RubySass ça sent le sapin).
Modifié par Olivier C (26 Oct 2018 - 06:57)