Page 1 sur 1
CSS Grid vs Flexbox : cas concret d'une galerie responsive
Publié : mer. févr. 25, 2026 5:35 am
par la_kiki06
Je développe une galerie photo qui doit passer de 4 à 1 colonne en mobile. Flexbox marche mais le code est lourd. Vous utiliseriez plutôt Grid pour ce cas ? (Compatibilité IE11 pas importante)
Re: CSS Grid vs Flexbox : cas concret d'une galerie responsive
Publié : mer. févr. 25, 2026 7:35 am
par le_noob62
Clairement oui ! Avec grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)), tu as un comportement responsive natif. Moins de media queries qu'avec Flexbox. Exemple sur mon GitHub (je peux partager en MP).
Re: CSS Grid vs Flexbox : cas concret d'une galerie responsive
Publié : mer. févr. 25, 2026 8:35 am
par david.l
Je plussoie Grid pour les layouts complexes. Par contre attention au gap qui n'est pas partout supporté (prévoir des margins fallback). Et pour l'ordre des items, Grid est imbattable !
Re: CSS Grid vs Flexbox : cas concret d'une galerie responsive
Publié : mer. févr. 25, 2026 8:35 pm
par la_kiki06
Merci ! J'ai testé et effectivement c'est plus propre. Par contre j'ai un bug sous Safari iOS 14 : les images dépassent. Vous connaissez ce souci ?
Re: CSS Grid vs Flexbox : cas concret d'une galerie responsive
Publié : jeu. févr. 26, 2026 12:35 am
par camille31
Oui, Safari a des bugs sur minmax(). Essaie d'ajouter overflow: hidden sur le container. Sinon solution bourrin : @supports not (gap: 1em) { margin-right: 1em; }
Re: CSS Grid vs Flexbox : cas concret d'une galerie responsive
Publié : jeu. févr. 26, 2026 3:35 am
par le_noob62
Autre astuce : définis une height explicite sur les images ou utilise object-fit: cover. Les vieilles versions de WebKit sont capricieuses sur les dimensions implicites.
Re: CSS Grid vs Flexbox : cas concret d'une galerie responsive
Publié : jeu. févr. 26, 2026 12:35 pm
par la_kiki06
Le overflow: hidden a réglé le souci ! Merci à tous, je vais définitivement adopter Grid pour ce genre de cas. La gestion des espaces est tellement plus intuitive.