Site avec grid et flexbox

Bonjour,

j'ai réalisé un site, très minimaliste, avec grid. La galerie d'images est en flexbox. Le site est en construction, il ne sera actif que dans plusieurs mois. Le squelette est en place mais le contenu n'est en aucun cas finalisé. Les liens du menu sont inactifs, excepté celui "moins de 50 euros", situé sur la gauche du menu déroulant. Les noms des images ne sont pas les bons, et les prix sont aléatoires. Je ne ne propose pas ce site ici pour évaluation (je n'empêche personne de le faire...), mais pour parler de grid. Provisoirement, le site est chez un hébergeur gratuit (noindex, nofollow) :

http://barakiss.free.fr

Je débute avec grid et j'ai encore de nombreuses zones d'ombre, malgré l'abondante documentation déjà disponible. Et je constate qu'on ne parle pas beaucoup de grid sur le forum.

Mes problèmes non résolus :

Avec la commande "grid-template-rows", je n'arrive pas à répartir l'espace sur les faibles résolutions. En mode 320x480, le texte de "main" se résume à une ligne, avec un ascenseur. Normalement, avec la commande "grid-auto-rows: minmax(40px, auto);", on devrait voir s'allonger la cellule suivant son contenu, mais ça ne fonctionne pas. Et dans ces basses résolutions, si je passe en mode paysage, plus rien ne s'affiche, mis à part le titre et les menus! Mais si j'enlève le 100% mis sur html en début du fichier css, tout devient normal de ce côté (mais d'autres problèmes apparaissent ailleurs, bien sûr).

Il serait souhaitable que l'on puisse définir l'espace entre les cellules individuellement (commande "grid-row-gap"). Hélas, cette commande est globale.

Sur un iPad mini, le footer ne se place pas en bas de la page. Il ne s'en rapproche que quand le texte de "main" devient plus grand. J'ai l'impression que iPad mini ne reconnaît pas grid.

Et aussi, pourquoi devoir rajouter tous ces margin, padding et autres width avec grid pour que tout se positionne correctement ? Est-ce normal ?

En tous cas, et c'est un peu décevant, en matière de "responsive", ce site n'arrive pas à la cheville de celui que j'avais fait il y a quelques mois avec les css de positionnement. Et je ne l'ai testé pour le moment qu'avec un iPad mini et Firefox 52 en mode adaptatif.

Il me semble que grid est l'avenir, et parler ici de nos expériences serait souhaitable.

Merci de vos retours.

(Je ne donne pas le code, mon message est déjà assez long, mais je peux le faire dans une autre post).
Modifié par Bongota (23 May 2018 - 12:39)

Bonjour,

> Normalement, avec la commande "grid-auto-rows: minmax(40px, auto);", on devrait voir s'allonger la cellule suivant son contenu.

Oui. Mais pour l'instant il y a beaucoup d'autres propriétés appliquées de façon peu logique.
Actuellement il est appliqué les propriétés suivantes (entre autre) sur body :
- grid-template-rows: auto 5px 50px auto 1fr; -> impose une hauteur à chaque rangée, ce qui n'est généralement pas souhaitable. Par exemple chez toi, cela impose de faire rentrer ta "nav" dans une rangée de 5px de haut !
- grid-template-column: auto; -> n'existe pas, n'est pas appliqué
- grid-rows-end: auto; -> n'existe pas, n'est pas appliqué

> Il serait souhaitable que l'on puisse définir l'espace entre les cellules individuellement (commande "grid-row-gap"). Hélas, cette commande est globale.

Oui. C'est effectivement la gouttière globale. Mais rien ne t'empêche de provoquer des marges entre tes éléments de grille en sus.


A part cela, il faut tenir compte de multiples incohérences. En voici quelques-unes dénichées en survolant ton code :

- #header a une taille de 100% + margin-left 10% soit 110%
- #main a une taille de 70% + margin-left 20% + margin-right 16% soit 106%
- etc.

Tout cela rend un peu compliqué le déboggage

De manière générale, je pense que c'est surtout le grid-template-rows: auto 5px 50px auto 1fr; qui fait foirer l'ensemble.
Personnellement je tenterai plutôt une valeur telle que "auto auto auto 1fr auto" pour que chacun ait la place nécessaire et que ce soit #main qui occupe tout l'espace restant.

Bon courage !

Bonjour,

et merci pour les conseils. Je vais un peu nettoyer tout ça et je reviendrai quand ce sera au point, ou quand j'aurai vraiment un problème insoluble.
Normalement, avec grid, on ne devrait pas avoir à mettre des "margin" pour centrer les contenus des cellules. Le fait est que ce n'était pas le cas chez moi, raison pour laquelle j'ai "bricolé".

A plus.

Bongota a écrit :
Normalement, avec grid, on ne devrait pas avoir à mettre des "margin" pour centrer les contenus des cellules.

En effet. Mais dans ton cas, si j'ai bien compris, ce n'est pas "centrer" que tu voulais verticalement, mais "espacer", non ?

Bonjour,

je parlais des deux, du centrage horizontal du contenu des cellules et de la hauteur de chaque cellule par rapport à son contenu.

J'ai commencé à corriger, il y a effectivement du changement. Je viens aussi de constater que j'avais défini un "content" pour la galerie d'images, mais que je ne l'utilisais pas. Cette galerie en flexbox n'est pas mise dans "content", elle est dans "main". C'est peut-être pas standard comme pratique, mais que se passe-til si en grid on a une ligne de cellules présente dans la liste mais pas occupée (comme mon "content" dans les pages sans la galerie) ? Il y a un grand espace vide sur la page ? Ce qui voudrait dire qu'il faudrait occuper toutes les cellules déclarées ? C'est bien mystérieux pour moi, tout ça.

Sur les résolutions 360x640,je suis obligé de mettre margin-left et margin-right en auto, afin de centrer le "main". Et en 320x480, c'est la cata, le main ne s'affiche pas et le footer est problématique. Je verrai ça plus tard, pour le moment, je nettoie, afin de repartir sur des bases saines.

Merci pour l'aide, Raphael.