Mise en page responsive de cartes avec CSS Grid et clamp()

What are you most proud of, and what would you do differently next time?

Je suis fiere d’avoir réussi à rendre la section des quatre cartes complètement responsive, avec un design qui s’adapte bien du mobile au desktop. J’ai appris à utiliser clamp() pour fluidifier les espacements et tailles de texte, et à organiser mon CSS avec des breakpoints.

Si je devais refaire ce projet, je passerais peut-être plus de temps à anticiper la structure CSS au début, afin de ne pas revenir trop souvent sur mes media queries. J’aimerais aussi tester d’autres façons de centrer les éléments, ou utiliser CSS Grid différemment pour aller encore plus loin dans la disposition asymétrique.

What challenges did you encounter, and how did you overcome them?

J’ai eu du mal à reproduire exactement la disposition des cartes sur desktop, car la maquette a une organisation un peu particulière (les cartes sont asymétriques, pas juste une grille classique).

J’ai aussi perdu du temps sur les media queries : il fallait que l’affichage passe d’une colonne à la disposition asymétrique sur desktop.

Pour surmonter ces difficultés, j’ai relu la doc de CSS Grid, testé différentes combinaisons et cherché des exemples similaires sur le forum de Frontend Mentor. J’ai aussi utilisé l’inspecteur du navigateur pour mieux comprendre l’alignement des éléments.

What specific areas of your project would you like help with?

J’aimerais des conseils sur la meilleure façon d’organiser mes breakpoints et mon CSS pour garder le code lisible, surtout avec plusieurs transitions entre mobile, tablette et desktop.

Je me demande aussi si mon utilisation de clamp() est optimale, ou s’il y a d’autres façons plus “propres” de gérer la fluidité des tailles (padding, texte,…).

Enfin, si quelqu’un a des astuces pour rendre la disposition asymétrique plus simple à maintenir dans le temps (par exemple, pour ajouter des cartes en plus), je suis preneur !