Flexbox gère un axe à la fois. Grid gère les deux axes simultanément — parfait pour les mises en page complexes.
.grille {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 colonnes égales */
gap: 24px;
}
/* Colonne qui s'étend sur 2 emplacements */
.grande-carte {
grid-column: span 2;
}
/* Grille responsive simple */
.grille-auto {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}
auto-fit + minmax : les colonnes s'ajustent automatiquement selon l'espace disponible. Très utile.
L'approche mobile-first consiste à écrire le CSS pour les petits écrans d'abord, puis à l'élargir pour les grands.
/* Base : mobile (moins de 600px) */
.container {
padding: 16px;
}
.grille {
display: grid;
grid-template-columns: 1fr; /* 1 colonne sur mobile */
}
/* Tablette : à partir de 600px */
@media (min-width: 600px) {
.container { padding: 32px; }
.grille { grid-template-columns: 1fr 1fr; }
}
/* Desktop : à partir de 1024px */
@media (min-width: 1024px) {
.container { max-width: 1200px; margin: 0 auto; }
.grille { grid-template-columns: repeat(3, 1fr); }
}
Les animations subtiles améliorent l'expérience utilisateur. La clé : moins c'est plus.
/* Transition sur hover */
.bouton {
background-color: #1a1a1a;
color: white;
padding: 12px 24px;
border-radius: 6px;
transition: background-color 0.2s ease, transform 0.2s ease;
}
.bouton:hover {
background-color: #333;
transform: translateY(-2px); /* légère élévation */
}
/* Animation d'apparition */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.carte {
animation: fadeInUp 0.4s ease forwards;
}
Les pseudo-classes ciblent des états spéciaux d'éléments.
a:hover { color: var(--accent); }
a:visited { color: purple; }
input:focus { border-color: var(--accent); outline: none; }
/* Premier / dernier enfant */
li:first-child { font-weight: bold; }
li:last-child { border-bottom: none; }
/* Chaque 2ème élément */
tr:nth-child(even) { background-color: #f5f5f5; }
Les pseudo-éléments ajoutent du contenu sans HTML :
.titre::before {
content: "→ ";
color: var(--accent);
}
/* Soulignement animé */
.lien::after {
content: "";
display: block;
height: 2px;
width: 0;
background: var(--accent);
transition: width 0.3s;
}
.lien:hover::after { width: 100%; }
Prends ta page de la Séquence 3 et rends-la entièrement responsive.
Ce que tu dois ajouter
- Breakpoints à 600px et 1024px
- Menu hamburger sur mobile (CSS uniquement, avec checkbox hack ou transition)
- La grille des projets passe de 1 à 2 à 3 colonnes selon l'écran
- Transitions sur les boutons et liens
- Animation d'apparition sur les cartes
Test obligatoire
Ouvre l'inspecteur de ton navigateur (F12), clique sur l'icône mobile, et vérifie que la page est correcte à 375px, 768px et 1440px.
Quiz — Séquence 4
Vérifie ta compréhension avant de passer à la suite. Réponds à toutes les questions, puis valide.