Grid CSS cassée au zoom

Bonjour,

J’utilise CSS Grid pour créer une mise en page en 3 colonnes sur desktop, avec un passage en 1 colonne via media query sur mobile. Cependant, lorsque je zoome le navigateur à environ 125%–150%, le layout se casse : certaines colonnes passent à la ligne alors que le breakpoint n’est pas encore atteint.

Est-ce qu’il existe une bonne pratique pour garder une mise en page stable lors du zoom utilisateur sans multiplier les media queries ? Quels types d’unités (px, %, rem, fr...) recommandez-vous dans ce cas ?

Merci d’avance pour votre aide !

Bonjour et bienvenue sur le forum,

Pour répondre à ta question : Quand l'utilisateur zoome à 150%, le pixel CSS ne change pas. Ce qui change, c'est la taille du viewport. Ce qui se passe :

- Un écran de 1920px de large, zoomé à 150%, devient un viewport de 1280px CSS (1920 / 1.5).
- Si ton breakpoint est à 1024px, à 150% de zoom, le viewport est encore à 1280px : logiquement, tes 3 colonnes devraient tenir.
- Mais si tu utilises des unités px pour la largeur des colonnes, elles ne s'adaptent pas proportionnellement. Le contenu devient trop large pour l'espace disponible et casse le layout.

éviter : width: 400px
préviligier : width: 33.33% ou 1fr.
Pourquoi ? Les pixels sont fixes, les pourcentages et fractions s'adaptent au viewport

éviter : gap: 20px
préviligier : gap: 1.5rem
Pourquoi ? Le rem s'adapte au zoom du navigateur

éviter : font-size: 18px
préviligier : font-size: 1.125rem
Pourquoi ? Même principe, l'utilisateur qui zoome verra le texte s'adapter

éviter : padding: 30px
préviligier : padding: clamp(1rem, 3vw, 2rem)
Pourquoi ? clamp() permet une adaptation fluide avec des bornes min/max
Modifié par Niuxe (23 Apr 2026 - 23:36)