Module 11 : Grille et responsive
Le club photo a un problème
Tu te souviens du club photo ? Sa page d'accueil, c'était ton défi du module 2. Ses cartes d'annonce, celui du module 8. La galerie est en ligne depuis une semaine, et les membres râlent.
Pas sur les photos. Sur le téléphone.
« Sur mon écran, tout est minuscule. » « Je dois scroller pendant dix minutes pour voir six images. » « Sur l'ordi du club c'est nickel, mais personne n'utilise l'ordi du club. »
Ils ont raison, et les chiffres aussi : plus de 60 % des visites du web se font sur un téléphone. Une page qui n'est belle que sur grand écran, c'est une page ratée pour deux visiteurs sur trois.
Deux superpouvoirs manquent à ta boîte à outils. Les voici.
Superpouvoir 1 : ranger en deux dimensions
Depuis le module 9, tu sais aligner des éléments avec Flexbox. Une rangée, ou une colonne. Une direction à la fois.
Une galerie de photos, ce n'est pas ça. C'est trois par ligne, sur autant de lignes qu'il faut. Des colonnes et des lignes, en même temps. Flexbox sait le bricoler ; CSS Grid est fait pour.
Le partage des rôles est le même qu'en Flexbox, et c'est une bonne nouvelle : le parent décide, les enfants obéissent. Une déclaration sur le conteneur, et les six photos se rangent toutes seules.
| Tu as besoin de… | Choisis |
|---|---|
| une barre de navigation, une rangée de boutons | Flexbox (1 dimension) |
| une galerie, un tableau de cartes, une mise en page de page entière | Grid (2 dimensions) |
Ne cherche pas laquelle est « la meilleure » : ce sont deux outils différents. Les vrais sites utilisent les deux, souvent dans la même page — tu le feras toi-même à l'exercice 11.5.
L'unité qui change tout
Grid apporte une unité que tu ne connais pas encore : fr, pour fraction.
Elle ne mesure rien. Elle partage. Une colonne en 1fr veut dire « donne-moi une part de la place disponible ». Trois colonnes en 1fr, c'est trois parts égales — sur un écran de 1200 pixels comme sur un téléphone de 360.
C'est exactement ce qui manquait à une largeur en pixels : width: 300px est
une promesse que le téléphone ne peut pas tenir. Une part, si.
La balise que tu écris depuis le module 1
Ouvre le squelette de page que tu recopies depuis le tout premier module. Cette
ligne-là, dans le <head> :
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Tu ne l'as jamais expliquée. Voilà pourquoi elle existe.
Sans elle, un téléphone fait semblant d'être un écran d'ordinateur : il rend la page en 980 pixels de large, puis dézoome le tout pour la faire rentrer. Texte minuscule, boutons impossibles à viser. C'est même le problème exact que décrivent les membres du club.
Avec elle, le téléphone dit la vérité sur sa largeur. Et à partir de là, tout le reste du module devient possible.
Superpouvoir 2 : des styles selon l'écran
Le deuxième outil s'appelle une media query. On l'écrit avec un mot-clé qui commence par une arobase, et il se lit comme une condition :
@media (min-width: 768px) {
/* ces styles ne s'appliquent qu'à partir de 768 pixels de large */
}
Un bloc de CSS entre accolades, qui n'entre en jeu que si la condition est vraie. Le navigateur relit cette condition en continu : redimensionne la fenêtre, et la mise en page bascule sous tes yeux.
Mobile d'abord, et pas par idéologie
Il y a deux façons d'écrire ça. Les styles de base pour le grand écran, puis on rattrape pour le petit — ou l'inverse.
La deuxième s'appelle le mobile-first, et c'est la bonne. Raison très concrète : le téléphone est le cas le plus contraint. Une colonne, peu de place, pas de survol. Partir de là, c'est partir du plus simple, puis ajouter quand l'écran le permet. Dans l'autre sens, on passe son temps à défaire ce qu'on vient d'écrire.
Tu verras la différence de tes yeux aux exercices 9.3 et 9.4 : le même résultat, écrit dans les deux sens, et l'un des deux est nettement plus court.
Une bonne nouvelle sur ton aperçu
Le panneau d'aperçu, à droite de ton éditeur, fait environ 350 pixels de large. Autrement dit : c'est un téléphone.
Ce n'est pas un défaut, c'est ton meilleur allié pour ce module. Tu développes directement dans le cas le plus difficile. Et quand tu voudras voir l'autre état, tu masqueras les instructions ou tu tireras la séparation vers la gauche pour élargir l'aperçu.
Au programme
Six exercices, et la galerie du club redevient fréquentable :
- La grille — les six photos se rangent en trois colonnes
- La formule magique — le nombre de colonnes s'ajuste tout seul
- Une media query — des styles réservés aux petits écrans
- Mobile-first — le même résultat, écrit dans le bon sens
- Le menu qui s'empile — Flexbox et media query réunis
- Le défi : la galerie responsive, dernier exercice de la formation
Prêt ?
C'est le dernier module de HTML/CSS. Après lui, tu sauras construire une page complète qui tient debout sur n'importe quel écran — et ça, c'est exactement ce qu'on demande à un développeur web le premier jour. On y va !
Prochain exercice
Ta première grille