CSS Grid & layouts de page

Cette leçon fait partie du parcours annuel Code Academy Alfred. Objectif : comprendre grid-template-columns, areas, responsive grid en conditions réelles de conception web / web mobile.

Grid excelle en 2D : pages, dashboards, galeries. grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) est un pattern mobile-friendly puissant.

grid-template-areas rend le layout lisible. Combine Grid (page) + Flex (composants).

Évite de tout forcer en Grid : choisis l’outil selon le problème.

Mets en pratique immédiatement : recrée l’exemple, puis modifie-le. La mémorisation vient de la répétition active, pas de la lecture passive.

Si tu bloques, utilise Cursor avec un prompt précis (contexte + objectif + contraintes), puis explique toi-même le diff généré.