GRID Flashcards
Qu’est-ce qui vous a motivé à choisir CSS Grid plutôt que Flexbox pour l’affichage de vos jeux ?
J’ai opté pour CSS Grid car j’avais besoin d’un contrôle précis sur une mise en page bidimensionnelle. Alors que Flexbox excelle dans la disposition unidimensionnelle (soit en ligne, soit en colonne), Grid me permettait de créer facilement une mosaïque avec des éléments de tailles variées. De plus, la capacité de Grid à définir explicitement des emplacements spécifiques pour les cartes de jeux (comme pour les grandes cartes qui s’étendent sur 8 colonnes) était essentielle pour obtenir le design visuel recherché.
Expliquez la différence entre grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) utilisé dans la version mobile et le modèle à 12 colonnes utilisé dans la version desktop.
Pour la version mobile, j’ai privilégié une approche fluide avec repeat(auto-fill, minmax(280px, 1fr)) qui crée automatiquement autant de colonnes que possible avec une largeur minimale de 280px. Cela assure que les cartes restent lisibles même sur les petits écrans.
Pour la version desktop, j’ai adopté une grille fixe de 12 colonnes qui me donne plus de contrôle sur le positionnement précis de chaque carte. Cela me permet de créer une hiérarchie visuelle en variant la taille des cartes (grandes, moyennes et petites) pour attirer l’attention sur certains jeux tout en créant un rythme visuel intéressant.
Comment fonctionne votre système de mise en page responsive pour les cartes de jeux ?
Mon système repose sur une transition entre deux approches :
Sur mobile, j’utilise une grille simple où chaque carte occupe automatiquement l’espace disponible, avec un minimum de 280px par carte.
Sur desktop (à partir de 768px), je passe à une grille complexe à 12 colonnes où :
Certaines cartes (1ère de chaque groupe de 12) occupent 8 colonnes pour mettre en avant des jeux importants
D’autres occupent 6 colonnes pour des jeux de priorité moyenne
Les autres occupent 4 colonnes pour les jeux standard
Cette approche permet une expérience visuelle riche sur grand écran tout en restant parfaitement fonctionnelle et simple sur mobile.
Pouvez-vous expliquer la logique derrière la sélection nth-child(12n + X) dans votre CSS ?
La sélection nth-child(12n + X) crée un motif qui se répète tous les 12 éléments. J’ai choisi un cycle de 12 car il est facilement divisible (par 2, 3, 4 et 6), ce qui me donne une grande flexibilité pour créer des mises en page variées.
Par exemple, nth-child(12n + 1) sélectionne les 1er, 13e, 25e éléments, etc. J’utilise ces sélecteurs pour attribuer différentes tailles aux cartes selon leur position dans la séquence, créant ainsi un motif visuel dynamique mais prévisible qui se répète.
Comment gérez-vous l’affichage du message “Aucun résultat” dans votre grille ?
Pour le message “Aucun résultat”, j’utilise grid-column: 1 / -1 qui fait en sorte que ce message s’étende sur toutes les colonnes disponibles, de la première à la dernière. Cette technique permet d’assurer que le message est centré et visible, occupant toute la largeur de la grille.
J’ai également appliqué un style cohérent avec l’identité visuelle du site (couleur #c3b0ea et la même police “Inter”) pour maintenir l’harmonie visuelle même quand aucun résultat n’est trouvé.
Quels défis avez-vous rencontrés lors de l’implémentation de cette grille CSS ?
Le principal défi était de créer une expérience cohérente entre mobile et desktop malgré des approches très différentes. Assurer que la transition soit fluide sans causer de sauts visuels désagréables a nécessité plusieurs itérations.
Un autre défi était de gérer correctement l’espace lorsque le nombre de jeux ne correspond pas exactement au motif prévu. J’ai dû m’assurer que la grille reste équilibrée visuellement même avec un nombre variable d’éléments, particulièrement après filtrage par la recherche.
Comment avez-vous déterminé les breakpoints pour votre design responsive ?
J’ai choisi 768px comme breakpoint principal car c’est une valeur standard qui correspond approximativement à la transition entre les appareils mobiles et les tablettes/desktops. J’ai testé différentes valeurs et constaté qu’en dessous de 768px, la mise en page complexe à 12 colonnes devenait trop dense et illisible.
Cette décision a été prise après avoir analysé les comportements de navigation typiques des utilisateurs sur différents appareils et en m’assurant que l’expérience reste optimale quelle que soit la taille d’écran.
Si vous deviez refaire cette grille, feriez-vous quelque chose différemment ?
Si je devais la refaire, j’envisagerais d’utiliser CSS Grid Areas pour nommer explicitement les zones de la grille, ce qui pourrait rendre le code plus lisible et plus facile à maintenir.
J’ajouterais également peut-être un breakpoint intermédiaire pour les tablettes, proposant une mise en page intermédiaire entre le simple flux mobile et la grille complexe desktop, avec peut-être 6 colonnes au lieu de 12.
J’optimiserais aussi davantage les performances en utilisant des techniques comme will-change pour les animations et transitions sur les cartes.
