Intégration CSS Grid vs Flexbox : cas pratiques et erreurs courantes

[seb33]

Je me forme aux layouts modernes. Dans quels cas précis choisiriez-vous Grid plutôt que Flexbox ? J'ai l'impression que tout le monde utilise Flexbox par défaut maintenant...

[neo92]

Flexbox = 1 dimension (une ligne OU une colonne). Grid = 2 dimensions. Exemple concret : pour un gallery avec lignes ET colonnes responsives, Grid est 10x plus simple. J'ai un pen sur CodePen qui montre la différence.

[admin_sys_du_13]

Attention à l'over-engineering ! J'ai refait un site récemment : 80% des layouts étaient plus simples en Flexbox. Grid devient intéressant pour les grilles complexes (ex : calendrier) ou les zones nommées.

[seb33]

@144 tu pourrais partager ton pen ? @76 du coup pour un header avec logo à gauche et nav à droite, tu resterais sur Flexbox ?

[admin_sys_du_13]

Exactement ! Header = cas typique de Flexbox. Un truc : si tu te retrouves à imbriquer 3 divs juste pour centrer verticalement, c'est que t'as pas compris Flexbox display: flex + align-items: center suffisent !

[flo92]

N'oubliez pas le support navigateur ! Grid a encore quelques bugs sur Safari (surtout les anciennes versions). Toujours tester avec Autoprefixer. Mon combo gagnant : Flexbox pour les composants, Grid pour les macro-layouts.

[neo92]

Je t'ai envoyé le lien en MP @301. Ajout important : Grid est indispensable pour les designs avec chevauchements (overlap). Avec Flexbox tu finis par hack avec position:absolute et des marges négatives...