[Résolu] Grid : div avec 3 colonnes, grid-template-rows obligatoire ?

Salut
J'aimerais savoir si quant on as un DIV avec uniquement des colonnes, par exemple :

.nom-div {
	display:grid;
	grid-template-columns:auto 1fr auto;
}

il faut obligatoirement mettre grid-template-rows ? de ce que j'ai vue et déjà fait non. Mais j'aimerais en avoir la confirmation.
Modifié par schtroumph (19 Mar 2020 - 16:20)

Merci pour la confirmation

Salut,
pareillement, mais si tu ne mets pas "grid-template-rows ", tu auras trois colonnes mais qu'une ligne ? C'est à dire pas d'en-tête, pas de pied de page indépendants ? Ou alors ils seront en dehors de grid, ce qui n'est pas très cohérent. Ou alors tous dans la même div. Et si, par exemple, tes colonnes font 1fr, 1fr, 1fr en 1024, quand tu arriveras sur les résolutions mobiles, il te faudra les mettre dans des lignes, sinon elles seront toutes étroites. En flexbox, je crois que les colonnes passeraient les unes en dessous des autres, mais en grid, elles vont rétrécir au maximum pour se faire de la place. Il ne faut pas se priver de ligne, de façon à pouvoir jouer.

@bongota,
les lignes supplémentaires ne seront pas en dehors du conteneur, elles prendront juste la hauteur de l’élément le plus haut, le nombre de lignes ne sera pas limité, même si tu indiques un template pour 2,3 ou x lignes.

A l'opposé, un grid-template-rows defini, imposeras une hauteur minimale au conteneur , même si celui-ci est en tout ou partie vide.

demo à tester : https://codepen.io/gc-nomade/pen/ExjpNRg

Cdt
Modifié par gcyrillus (19 Mar 2020 - 21:33)

Avec grid (je ne connais pas flex) pour que tes conteneurs passent à la ligne automatiquement en responsive sans recours aux media queries, il faut utiliser auto-fit avec minmax(). Voir CSS Grid : comment fonctionne minmax().

Merci de mentionner minmax. Le fait que les colonnes doivent avoir la même largeur pour fonctionner dans cette configuration apporte quelques limites pour les sites aux colonnes de largeur différentes, c'est à dire la plupart (c'est dit dans l'article en référence). Par contre, pour des tableaux égaux en largeur, c'est l'idéal. Si je comprends bien, dans cette configuration, on pourrait construire un site adapté aux mobiles sans les @medias, c'est à dire sans répliquer tout le code adapté aux mobiles ? Mais alors, comment fera-t-on pour changer un menu horizontal en "burger", pour changer la taille des textes ou pour tout ce qu'on ajoute ou soustrait dans une version mobile ? Il faudra bien un @media pour détecter le passage en faible résolution. Les possibilités de cette technique m'intéressent.

Bongota a écrit :
Merci de mentionner minmax. Le fait que les colonnes doivent avoir la même largeur pour fonctionner dans cette configuration apporte quelques limites pour les sites aux colonnes de largeur différentes, c'est à dire la plupart (c'est dit dans l'article en référence). Par contre, pour des tableaux égaux en largeur, c'est l'idéal. Si je comprends bien, dans cette configuration, on pourrait construire un site adapté aux mobiles sans les @medias, c'est à dire sans répliquer tout le code adapté aux mobiles ? Mais alors, comment fera-t-on pour changer un menu horizontal en "burger", pour changer la taille des textes ou pour tout ce qu'on ajoute ou soustrait dans une version mobile ? Il faudra bien un @media pour détecter le passage en faible résolution. Les possibilités de cette technique m'intéressent.

Le minmax couplé a auto-fit, fera que selon la largeur de l'écran le nombre de colonnes pourra varier en dehors de leurs largeurs respectives .
La question initiale partait sur une construction à 3 colonnes sans mise en forme des lignes.

La question d'un menu horizontal/vertical passant en mode "hamburger" dans un contexte de grid-layout mérite la création d'une nouvelle discussion avec idéalement une description ou exemple de problème permettant d'apporter des solutions ou propositions à un exemple concret, juste pour éviter de partir dans tout les sens avec des si.
On est déjà confiné, pas besoin de remettre Paris en bouteilles nom d'un schtroumpf !