28172 sujets

CSS et mise en forme, CSS3

Bonjour,

Ce codepen illustre mon nouveau problème.

Pourquoi dans la colonne de droite "article" n'est-il pas centré en haut alors que j'ai mis du START à tour de bras ?

Je pensais connaitre quelques pièges de GRID mais là j'ai besoin de votre aide...
Modérateur
Bonjour,

"Centré en haut", ça veut dire quoi ? Tu veux que article remonte pour coller au bas de section ?

Si c'est ça que tu veux, alors :
body {
  grid-template-rows: auto 1fr;
}


Amicalement,
Administrateur
Hello,

Tu as plein d'erreur dans ton CSS, par exemple :
- "min-max(0, 1fr)" n'existe pas (il n'y a pas de trait d'union dans minmax)
- "minmax (0, 1fr)" n'existe pas (tu as une espace avant la parenthèse)

C'est très étonnant que ton éditeur de code laisse passer ce genre d'erreurs.

Ensuite, concernant tes deux rangées, tu leur donnes une hauteur identique de "auto", du coup elles se répartissent toute la hauteur. Il faut donner une hauteur de 1fr à la seconde pour qu'elle occupe à elle seule l'espace vertical disponible.

Un exemple :

body {
  display: grid; 
  grid-template-columns: calc(20em + 2px) auto;
  grid-template-rows: auto 1fr; 
  justify-content: start; 
  align-items: start; 
  grid-column-gap: 50px
}
aside {grid-column: 1; grid-row: 1 / span 2; }
section {grid-column: 2; grid-row: 1; }
article {grid-column: 2; grid-row: 2; }
Bonjour parsimonhi,

OUI, c'est ce que je veux et cela fonctionne.

Mais je ne comprends pas pourquoi...

minmax(0, 1fr) je ne vois pas trop la différence avec 1fr.
Modifié par boteha_2 (25 Dec 2023 - 19:09)
Bonjour Raphaël,

Merci de ton suivi.

J'ai fait un copier-coller de ton code dans la codepen.

Bizarrement grid-column-gap: 50px n'est plus appliqué...

PS : j’utilise notepad++.
Si j'enlève la propriété grid-column-gap: 50px section et article se décalent vers la gauche et chevauchent aside..

J'avoue ne pas bien comprendre ce comportement, voir le codepen.
Modérateur
Bonjour,

C'est dû au margin-left: 45px couplé au width: 20em que tu as mis sur aside alors que la largeur de la colonne a été spécifiée à "seulement" calc(20em + 2px).

Il aurait fallu une largeur de colonne de calc(20em + 2px + 45px) pour que les éléments ne se chevauchent pas.

Ou bien il ne faut pas mettre de largeur à aside (puisqu'il y en a déjà une pour la colonne, ça fait double emploi).

Amicalement,
Bonjour,

parsimonhi a écrit :
C'est dû au margin-left: 45px couplé au width: 20em que tu as mis sur aside alors que la largeur de la colonne a été spécifiée à "seulement" calc(20em + 2px).

Il aurait fallu une largeur de colonne de calc(20em + 2px + 45px) pour que les éléments ne se chevauchent pas.


Compris, j'avais rectifié de moi-même.

parsimonh a écrit :
Ou bien il ne faut pas mettre de largeur à aside (puisqu'il y en a déjà une pour la colonne, ça fait double emploi).


Bizarrement, si j'enlève la déclaration width: 20em pour aside la colonne devient plus petite.

Bon, je tiens à m'excuser, mon code bourré de fautes a été tapé un peu vite le jour de Noël.

À ma légère décharge, la dernière version de Notepad++ pour Windows 10 ignore toutes les propriétés liées à GRID ou à FLEX.
Que je tape min-max ou minmax, c'est en noir, ainsi que la valeur associée, idem avec un espace entre minmax et la parenthèse ouvrante.

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.
Modérateur
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à ! Smiley lol Smiley lol Smiley lol
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)
parsimonhi,

Merci de ton suivi.

J'ai actualisé le codepen avec ton code.

Sauf erreur l'affichage ne correspond pas à ton souhait mais je n'ai pas trouvé l'erreur.

J'y reviens plus tard.
Modifié par boteha_2 (26 Dec 2023 - 22:24)
Modérateur
Bonjour,

boteha_2 a écrit :
J'ai actualisé le codepen avec ton code.

Sauf erreur l'affichage ne correspond pas à ton souhait mais je n'ai pas trouvé l'erreur.

Tu as laissé trainer un */ à la ligne 39 qui provoque une erreur.

Amicalement,
parsimonhi a écrit :

Tu as laissé trainer un */ à la ligne 39 qui provoque une erreur.


C'est corrigé, j'y reviens bientôt.
Bonjour,

parsimonhi a écrit :
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.


Ok, c'est subtil.

Et en enlevant toutes déclarations de width, ce que j'ai fait dans le codepen, cela devient bien fluide.
Bonjour,

Bonne année à tous.

J'ai arrangé un peu le codepen afin d'illustrer les exemples de parsimonhi et mon code initial (corrigé)..

Encore merci de votre aide.

Je coche Résolu.