Bonjour,
boteha_2 a écrit :
Bizarrement, si j'enlève la déclaration width: 20em pour aside la colonne devient plus petite.
Normal, c'est ce qui lui permet de ne plus "dépasser" ! Elle ne fait plus que 2px + 20em - 45px de large, alors qu'avec le width: 20em, bah elle faisait 20 em de large.
boteha_2 a écrit :
À ma légère décharge, la dernière version de Notepad++ pour Windows 10...
Je me suis arrêté de lire là !
boteha_2 a écrit :
Pour donner un aspect pédagogique à cette discussion je ne suis peut-être pas le seul à vouloir comprendre pourquoi grid-template-rows: auto 1fr ne peut pas être remplacé par grid-template-rows: auto minmax(0, 1fr).
Je pensais que 1fr et minmax(0, 1fr) étaient des valeurs quasi-équivalentes.
1fr est équivalent à minmax(auto, 1fr) et non pas à minmax(0, 1fr). La plupart du temps, ça donne les mêmes résultats. Mais si la largeur combinée des deux colonnes est supérieure à celle de la grid, ça peut faire une différence.
Supposons par exemple que les colonnes 1 et 2 ont un min-width de 30rem. Tant que la grille a au moins 60rem pour s'afficher, il n'y aura pas de différence. Si par contre la grille a moins de 60rem pour s'afficher, avec minmax(auto, 1fr), les deux colonnes vont rester juxtaposées et l'ensemble des deux va dépasser de la grille (vers la droite). Tandis qu'avec minmax(0, 1fr), les deux colonnes vont se chevaucher et l'ensemble ne dépassera pas de la grille.
En pratique on peut le tester avec le code css ci-dessous. Et on garde ton html. On a des minmax(0, 1fr), les deux colonnes vont se chevaucher si on réduit la largeur de la fenêtre du navigateur.
body {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-rows: auto auto;
background: #fff;
}
aside {
min-width: 30rem;
grid-column: 1;
grid-row: 1 / 3;
background: #f777;
}
section {
width: 30rem;
grid-column: 2;
grid-row: 1;
background: #7f77;
}
article {
width: 30rem;
grid-column: 2;
grid-row: 2;
background: #77f7;
}
Si on remplace les minmax(0,1fr) par minmax(auto,1fr) ou simplement 1fr (qui est la même chose), lorsqu'on réduit la largeur de la fenêtre du navigateur, les deux colonnes vont rester juxtaposées, mais vont dépasser de la grille vers à droite.
Amicalement,
Modifié par parsimonhi (26 Dec 2023 - 21:20)