L'idée de départ
Pendant longtemps, placer des éléments sur une page était galère (on bricolait avec des float et des tableaux). Aujourd'hui, deux outils modernes font tout le travail : Flexbox et CSS Grid.
La règle simple à retenir :
- Grid → pour la structure en deux dimensions (lignes et colonnes). C'est le plan de la page.
- Flexbox → pour aligner des éléments sur une seule dimension (une ligne ou une colonne). C'est l'alignement fin à l'intérieur.
Dans le TP
Grid sert à organiser la grille de widgets (macro), Flexbox sert à aligner l'intérieur de chaque carte, l'en-tête et les boutons (micro).
Flexbox — l'alignement sur une ligne
On déclare display: flex sur un conteneur, et ses enfants se rangent automatiquement côte à côte.
/* en-tête : titre à gauche, statut à droite */ .header { display: flex; align-items: center; /* alignement vertical */ justify-content: space-between; /* pousse aux extrémités */ }
Les propriétés à connaître
display: flex | Active le mode flex sur le conteneur. |
justify-content | Répartit les éléments sur l'axe horizontal (center, space-between…). |
align-items | Aligne les éléments sur l'axe vertical. |
gap | Espace entre les éléments. |
flex: 1 | Sur un enfant : il grandit pour remplir l'espace disponible. |
Exemple : 3 boutons avec
flex: 1 (ils se partagent l'espace)Bouton
Bouton
Bouton
Dans le dashboard
C'est exactement comme ça que les « Actions rapides » se répartissent : chaque bouton a
flex: 1, donc ils occupent une part égale de la largeur.
CSS Grid — la structure en colonnes
On déclare display: grid et on définit le nombre de colonnes avec grid-template-columns.
/* une grille à 3 colonnes égales */ .grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }
L'unité fr
Le fr (« fraction ») partage l'espace disponible. 1fr 1fr 1fr = trois colonnes de largeur égale, quelle que soit la taille de l'écran. C'est fluide, contrairement aux pixels fixes.
Exemple : une grille responsive (redimensionne la fenêtre pour voir)
1
2
3
4
5
6
La technique clé du TP : auto-fit + minmax
C'est LA ligne à retenir. Elle rend une grille responsive sans écrire une seule media query.
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
gap: 1.2rem;
}
Décortiquons :
repeat(...): répète un motif de colonne.minmax(270px, 1fr): chaque colonne fait au minimum 270px, et au maximum 1fr (elle s'étire pour remplir).auto-fit: le navigateur place autant de colonnes que la largeur le permet.
Résultat automatique :
- Grand écran → 4 colonnes
- Tablette → 2 colonnes
- Mobile → 1 seule colonne
Pourquoi c'est demandé
Le cahier des charges interdit les pixels fixes pour la grille et veut éviter les media queries. Cette ligne fait tout le travail toute seule : c'est le point le plus important du TP.
Grid ou Flexbox ? Le bon réflexe
| Besoin | Outil |
|---|---|
| Disposer une grille de cartes (lignes + colonnes) | Grid |
| Aligner titre / statut dans un en-tête | Flexbox |
| Répartir des boutons sur une ligne | Flexbox |
| Empiler le contenu d'une carte verticalement | Flexbox (column) |
| Structure globale de la page (header/main/footer) | Grid ou Flexbox |
Checklist avant de rendre
- La grille utilise
repeat(auto-fit, minmax(...)). - Aucune largeur de grille en pixels fixes.
- L'en-tête utilise Flexbox (titre à gauche, statut à droite).
- Les cartes ont leur contenu organisé en Flexbox.
- Les boutons d'action se répartissent l'espace avec
flex: 1. - La page passe bien de 4 → 2 → 1 colonne en réduisant la fenêtre.
- Structure sémantique :
header,main,footer.