Utilisation Grid ou Flex ?

Version imprimable

16/08/2019, 08h10
thirt

Utilisation Grid ou Flex ?

Bonjour à tous,

en fait, j'ai déjà commencé le site mais, en cours de route, je me suis rendu compte que j'aurais mieux fait d'utiliser les Grids ou les Flex pour la conception du site.

En fait, le header et le menu (à gauche) fonctionne parfaitement pour l'instant pour la version smartphone et laptop. Par contre, dans le corps du site, je dois faire pas mal d'adaptations et, après avoir lu pas mal de choses sur le CSS, je me suis rendu compte que c'était préférable d'utiliser soit les Grids et/ou les Flex pour la mise en page.

Je suppose que c'est préférable que je recommence la mise en page du site depuis le début afin d'appliquer les Grids et/ou Flex à tout le site. Je suppose que ce ne sera pas trop propre d'adapter uniquement les Grids et/ou Flex uniquement au corps du site ?

Afin d'utiliser les Grids et/ou Flex, avez-vous des recommandations à me faire ? Où puis-je trouver des informations sur les Grids et/ou Flex responsive ?

Doit-on utiliser uniquement les Grids ou uniquement les Flex ou peut-on les combiner ? Si on peut les combiner, quel est l'avantage de cette association ?

Merci d'avance

Bonne journée
Thierry
16/08/2019, 10h15
Invité
Bonjour,

tu devrais faire des recherches, approfondir tes connaissances, et te faire ta propre opinion et expérience.
Il n'y a pas ici de "mieux" ou "moins bien" ou "pas en même temps".
Il faut juste utiliser ce qui est nécessaire à bon escient.

grid ou flexbox ?
Parfois un simple display:table/table-cell; fait parfaitement la farce.

Il faut aussi penser "responsive" et "mobile first".
Tu peux aussi te tourner vers Bootstrap (ou équivalent).

NE PA OUBLIER :

Citation:

"Un BON code est un code SIMPLE."
16/08/2019, 11h02
thirt

Bonjour Jérôme,

encore une fois, merci pour vos conseils, votre aide et votre documentation.

En effet, comme vous le dites, il faut que la solution soit responsive. De mon côté, je n'ai pas trop envie de dépendre de Bootstrap. Donc, je préfère essayer d'écrire mon propre CSS mais ça risque de me prendre du temps mais c'est peut-être la meilleure solution pour apprendre. -:)

Par contre, je me demande si je peux facilement diviser une partie de la page avec les grids tout en essayant d'implémenter une solution responsive. En fait, j'ai mon header qui occupe tout le haut sur une certaine hauteur fixe, puis j'ai une side bar à gauche qui est le menu et qui est fixe sur laptop mais qui vient apparaître à l'écran quand on clique sur l'hamburger pour la version smartphone. A côté de cette side bar (menu) pour la version laptop, j'ai le corps que j'aimerais bien mettre en page par ce système de grilles entre autre. Le menu est fixe mais le corps est redimensionnable. Par contre, pour la version smartphone, le corps occupera toute la largeur naturellement vu que le menu vient se mettre sur l'écran quand on clique sur l'hamburger.

Dans ce cas-ci, je pense que je devrais pour utiliser les grids pour la mise en page.

Je ne sais pas ce que vous en pensez ?

Merci d'avance

Passez une agréable journée,
Thierry
16/08/2019, 11h23
Invité

Je t'ai donné de nombreux liens vers des exemples avec flexbox.

Concernant grid, je ne l'utilise pas (pas l'utilité, pas l'envie d'apprendre...).
A toi de te faire la main dessus. ;)

Citation:

"On ne se sert pas d'un canon pour écraser une mouche".

Commence par des mises en page SIMPLES !

EN TOUT CAS : DESSINE (sur PAPIER !) les mises en pages que tu veux obtenir :
Ça te permettra de faire un "découpage" en "boites", à placer, imbriquer,....
16/08/2019, 12h31
thirt

Bonjour Jérôme,

merci pour tous vos conseils ...

Bon week-end d'avance.
Thierry