Leçon 5 sur 5
Projet : une page responsive
Une vraie page responsive combine tout : un header en flex, une grille de cartes, et une media query pour le mobile.
L'objectif : une mise en page qui tient sur grand écran ET se réorganise proprement sur téléphone.
.nav { display: flex; justify-content: space-between; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 600px) {
.cards { grid-template-columns: 1fr; }
}🎯 Ton objectif
Compose la page : 1) .nav en display: flex avec justify-content: space-between ; 2) .cards en display: grid avec grid-template-columns: repeat(3, 1fr) ; 3) une media query @media (max-width: 600px) qui passe .cards à une seule colonne (grid-template-columns: 1fr).
Leçon PRO
Ce chapitre avancé fait partie de CodeAge PRO. Débloque-le pour continuer ton aventure.
Découvrir PRO →