Grid et les media queries

Bonjour,

je suis sur un nouveau site, et j'ai décidé de le bâtir avec grid. Ma première mouture fonctionne bien, grid est très efficace pour ce qu'il a été prévu : faire des lignes et des colonnes flexibles, modifiables très facilement dans tous les sens. Il faut pourtant mettre dans ces lignes et colonnes des "items" (du texte, des images et tout ce que l'on peut mettre sur un site). Là, les choses se gâtent, on est bien obligé d'utiliser les width, height, center et autres commande css si on veut quelque chose d'exploitable. J'ai obtenu un bon résultat, mais j'ai cependant une question par rapport aux media queries.

Si j'ai bien compris, avec grid, on utilise plus les media queries pour adapter le site aux tailles d'écrans, on les utilise seulement pour changer l'ergonomie du site le moment voulu. C'est grid qui s'occupe désormais d'adapter les colonnes et les lignes aux tailles d'écrans. Bien, mais pour les "items" que l'on place, ça ne se passe pas aussi bien, de mon expérience. Pour ne centrer que des images sur mes pages, je dois utiliser des media queries, suivant les différentes tailles d'écrans. Grid ne le fait pas. Ma question principale est la suivante : doit-on laisser toutes les commandes grid en dehors des media queries et n'utiliser celles-ci que pour le placement des "items" ?

A ce stade, je ne donne pas de lien sur le site provisoire. Il est sur un compte gratuit, en attendant sa finalisation. Je donne cependant une partie du css, afin que ma question soit bien comprise. Il y a dans ce bout de code les commandes grid et aussi le css permettant de placer des images qui se retournent au survol de la souris. C'est cette partie du code "PROFILES" et "FLIP" qui me pose problème. Suivant les résolutions d'écrans, je dois modifier les width et height dans "profiles". Et la seule solution est d'utiliser les media queries.

body {
   display: grid;
   height:100%;
   grid-template-rows: 10px 5px min-content 40px 1fr;/*Hauteur des items*/
   grid-template-column: auto;/* Largeur des items */
   grid-rows-end: auto;
   grid-row-gap: 50px;/*Espacement vertical entre les items*/  
   background-image: url("Images/Beoumi-1024.jpg");
   background-repeat:no-repeat;
   background-size:cover;
   
}

#sitemast {
   grid-row: 1; 
   grid-column: 1 / span 2;  
   width:100%;    
   font-size:6vw;
   text-align:left;
   padding-top:5px;
   margin-left:60px;
   font-family:'PolicePerso', serif;
   color:yellow; 
}

#nav {
   grid-row: 2; 
   grid-column: 1 / span 2;
   position: static; 
   margin-top: 35px; 
   padding-bottom: 0;
   font-size:.8em;
   text-decoration:none;
   text-align:center;
}

#titre {
   grid-row: 4; 
   grid-column: 1;
   width:90%;
   text-align:center;
   font-family:'PolicePerso', serif;
   color:yellow;
   margin-top:0%;
   padding-top: 0;
}

#content {
   grid-row: 3 / span 3; 
   grid-column: 1;
   width:90%;margin-top:5em;
   overflow: auto; 
}

#main {
   grid-row: 5; 
   grid-column: 1;
   width:60%;height:auto;
   color:white;
   margin-right:20%;
   margin-left:20%;    
   padding-top: 0;
   overflow: auto;
}

#footer {
   grid-row: 6; 
   grid-column: 1;
   height:auto;
   margin-right: 0;
   word-spacing:1px;
   text-align:center;
   font-size:3.4vw;   
   background:rgba(70, 0, 100, 0.2);}

/* PROFILES */
.profiles, .info { list-style:none; cursor:pointer; }
.profiles > li { width:180px; height:210px; float:left; margin-left:10%;margin-right:-10%; }
.info, .pic { position:absolute; }
.info { font-family: 'Lato', sans-serif; color:#fff; font-size:12px; padding:5px; background-color:rgba(137, 186, 17, 0.8); width:140px; height:160px; opacity:0; text-align:center; }
.info a { font-weight:bold; font-size:25px; color:#fff; text-decoration:none; }
.info a:hover { text-decoration:underline; }
.pic { width:140px; height:160px; }

/* FLIP */
#flip { perspective: 800px; }
#flip .info { transition: all 0.8s; opacity:1; transform-style: preserve-3d; }
#flip .info li { transform: rotateY(180deg); } /* Flip the text: Will be flipped back when animated */
#flip .pic { transition: all 0.8s; backface-visibility: hidden; z-index:999; transform-style: preserve-3d; }
#flip li:hover .info { transform: rotateY(180deg); }
#flip li:hover .pic { transform: rotateY(180deg); }

}

A noter que sur un iPad mini, mon site grid n'est pas affiché, mais ça, ce sera une autre histoire.

Message un peu long, mais merci pour vos réponses.

Bonjour,

Bongota a écrit :

Si j'ai bien compris, avec grid, on utilise plus les media queries pour adapter le site aux tailles d'écrans, on les utilise seulement pour changer l'ergonomie du site le moment voulu. C'est grid qui s'occupe désormais d'adapter les colonnes et les lignes aux tailles d'écrans. Bien, mais pour les "items" que l'on place, ça ne se passe pas aussi bien, de mon expérience. Pour ne centrer que des images sur mes pages, je dois utiliser des media queries, suivant les différentes tailles d'écrans. Grid ne le fait pas. Ma question principale est la suivante : doit-on laisser toutes les commandes grid en dehors des media queries et n'utiliser celles-ci que pour le placement des "items" ?

D'après mes quelques expériences dans le module Gridlayout, on ne peut pas dire qu'il y a une seule façon d'utiliser ce module. (Avec d'autres modules, l'utilisation est plus codifiée car plus ancienne.)
Lorsque le nombre des rangées et des colonnes est définie de façon dynamique, la disposition peut évoluer et s'adapter aux tailles d'écran.
Mais à ce moment-là, il faut que le positionnement des différents éléments soit lui aussi défini de façon dynamique : en effet, certains colonnes et rangées peuvent disparaitre. Et si on a assigné certains éléments à des emplacements bien précis...
Alors, la réponse à la question : je ne pense qu'il y ait de règles (encore) en la matière. (Je ne sais plus où j'ai mis cette page Web qui disait qu'il fallait se méfier des dogmes...)

Merci pour la réponse.

J'ai nettoyé les adresses et téléphones du site, mis des noindex et nofollow et je vais bientôt donner le lien ici. Ce sera plus facile pour avancer.

En attendant, j'ai supprimé tous les @media posés sur la partie grid et les aient laissés que sur la partie mise en place des images. Le résultat est le même, ce qui donne déjà un début de réponse. En effet, je ne vois pas pourquoi on ajouterait des @media sur les commandes grid, qui fait, entre autres, le même travail.

D'après tout ce que j'ai pu lire sur grid et les nombreux templates rencontrés ici et là, il y aurait en effet plusieurs façon de coder avec. Je n'en suis qu'au début de cet apprentissage et il y a des possibilités infinies.

Le site, hébergé chez free provisoirement, sera bientôt là.