CSS Grid vs Flexbox : cas concret d'une galerie responsive

[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)

[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).

[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 !

[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 ?

[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; }

[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.

[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.