[Résolu] Hauteur première ligne en display Grid

Bonjour,

Un problème auquel je ne comprends rien.

body {display: grid; grid-template-columns: 45px 20em auto 1fr; grid-template-rows: 45px auto auto; grid-template-areas: "i t m s" "n p r r" "f f f f"}

@media screen and (max-width: 768px)
{
body {grid-template-columns: auto 1fr; grid-template-rows: repeat (6, auto); grid-template-areas: "ss ss" "i m" "a a" "r r" "f f" "p p"}
}

Dans la version mobile la première ligne hérite de la hauteur de 45px de la version PC.
Cela n'est pas lié à la hauteur du contenu qui est bien inférieure.
Par ailleurs, j'ai essayé :

grid-template-rows: 10px repeat (5, auto)
Mais la hauteur ne change pas...

Si quelqu'un comprend l'erreur merci d'avance.

Bonsoir. La première ligne de code n'a pas de media-queries, elle n'est donc pas destinée aux seuls "PC" mais à toutes les résolutions d'écrans. Le media-queries qui suit, destiné aux mobiles, ne fait que surcharger cette règle.

Bonjour Olivier-C,

Merci de ta réponse, je fais le test demain.

Petit détail :

@media screen and (min-width: 769px)
{
}
@media screen and (max-width: 768px)
{
}

Je couvre bien les cas 768 et 769 ?
C'est équivalent à :

width >= 769px
width <= 768px

C'est du signe = dont je doute.

C'est ça. Un jour tu pourras utiliser directement les opérateurs de comparaison, mais pour l'instant c'est très mal supporté.

Bonjour Olivier-C,

Merci pour ta solution, elle fonctionne parfaitement.

Cela dit, depuis le temps que je pratique les media-queries, j'ai l'habitude d'avoir un style pour toutes tailles, puis d'adapter avec media-queries pour les petite écrans.

body {padding: 10px; color: red}
@media screen and (max-width: 768px)
{
body {padding: 0}
}

Ce qui m'étonne c'est que les propriétés de GRID ne se réinitialisent pas comme padding ou autre.

grid-template-columns: 45px 20em auto 1fr
grid-template-columns: auto 1fr

Je pensais que la deuxième ligne effaçait la première, tu me dis qu'elle la surcharge, je comprends mal pourquoi même si tu m'as donné la solution.
Modifié par boteha_2 (30 Nov 2022 - 20:11)

boteha_2 a écrit :
Cela dit, depuis le temps que je pratique les media-queries, j'ai l'habitude d'avoir un style pour toutes tailles, puis d'adapter avec media-queries pour les petite écrans.

Ce que tu fais est de l'adaptatif : tu pars des grandes résolutions puis surcharge tes règles pour obtenir une version pour mobile. Ce qui augmente le coût des calculs sur mobile, tu devrais faire l'inverse : partir de la version mobile et surcharger tes règles pour obtenir la version PC. C'est beaucoup plus optimisé et ça s'appelle le "mobile first design".

boteha_2 a écrit :
Je pensais que la deuxième ligne effaçait la première, tu me dis qu'elle la surcharge, je comprends mal pourquoi même si tu m'as donné la solution.

Disons que la deuxième ligne écrase les propriétés règles par règles.

Olivier C a écrit :
"mobile first design".

Ok, c'est noté.

Merci beaucoup.

Bonjour,

Je coche Résolu.

Merci pour votre aide.