Module 2La mise en page
Chapitre 10 sur 15
CSS Grid
Construire des grilles à deux dimensions, responsives et dessinées avec grid-template-areas.
- ≈ 175 min
- 7 leçons
- 3 vidéos
- 4 exercices
Module 2La mise en page
Chapitre 10 sur 15
Construire des grilles à deux dimensions, responsives et dessinées avec grid-template-areas.
Objectifs
Avec ce chapitre, tu sauras…
display: grid, grid-template-columns et grid-template-rows ;fr, les fonctions repeat() et minmax() ;auto-fit ;grid-column, grid-row et span ;grid-template-areas ;justify-items, align-items et place-items ;Flexbox gère une seule dimension : une ligne ou une colonne. CSS Grid gère deux dimensions à la fois : des lignes et des colonnes. C'est l'outil idéal pour la structure générale d'une page (en-tête, barre latérale, contenu, pied de page) et pour toutes les grilles : galeries, catalogues, tableaux de bord.
Leçon 1
.grille {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* trois colonnes égales */
gap: 1rem; /* espace entre les cases */
}<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;font-family:Inter,sans-serif;font-size:8pt;text-align:center;color:#fff">
<div style="background:#2f5bc4;padding:10px">1</div><div style="background:#2f5bc4;padding:10px">2</div><div style="background:#2f5bc4;padding:10px">3</div><div style="background:#17306e;padding:10px">4</div><div style="background:#17306e;padding:10px">5</div><div style="background:#17306e;padding:10px">6</div>
</div>Tableau: Le vocabulaire de Grid
| Terme | Sens |
|---|---|
| conteneur de grille | l'élément en display: grid |
| élément de grille | chaque enfant direct |
| piste (track) | une colonne ou une ligne |
| cellule (cell) | l'intersection d'une ligne et d'une colonne |
| ligne de grille (grid line) | les traits qui séparent les pistes, numérotés à partir de 1 |
| zone (area) | un rectangle de plusieurs cellules |
Vidéo · À regarder
FRFormation CSS, tuto complet pour démarrer
L'instant Code · YouTube
Vidéo · À regarder
FRCSS Grid Layouts : Maîtriser CSS Grid Facilement | Tutoriel Complet pour Débutants
Coding Minds · YouTube
Leçon 2
| Écriture | Résultat |
|---|---|
repeat(4, 1fr) | quatre colonnes égales (= 1fr 1fr 1fr 1fr) |
200px 1fr | une colonne fixe de 200 px, puis une colonne qui prend le reste |
minmax(200px, 1fr) | une colonne d'au moins 200 px, qui peut grandir |
repeat(auto-fit, minmax(250px, 1fr)) | autant de colonnes que possible, de 250 px minimum |
Leçon 3
Leçon 4
Leçon 5
Leçon 6
| Propriété | Sur… | Aligne… |
|---|---|---|
justify-items | le conteneur | horizontalement, chaque élément dans sa cellule |
align-items | le conteneur | verticalement, chaque élément dans sa cellule |
place-items | le conteneur | les deux : place-items: center; |
justify-content / align-content |
Leçon 7
| Situation | Outil | Pourquoi |
|---|---|---|
| un menu, une barre d'outils, des boutons alignés | Flexbox | une seule dimension, les éléments ont leur taille naturelle |
| centrer un élément | les deux | flex + justify-content + align-items, ou grid + place-items |
| une galerie, un catalogue de produits | Grid | lignes et colonnes alignées |
| la structure générale de la page |
1Grid gère…
2grid-template-columns: 1fr 3fr; : la deuxième colonne est…
3Une grille de 4 colonnes a combien de lignes de grille verticales ?
4grid-column: 2 / 4 couvre…
5Une grille responsive sans media query s'écrit…
6Pour une liste d'étiquettes de tailles différentes qui passent à la ligne :
L'essentiel du chapitre
display: grid + grid-template-columns (+ grid-template-rows) + gap. Mise en page à deux dimensions.fr = une part de l'espace libre. repeat(), minmax().repeat(auto-fit, minmax(250px, 1fr)) : grille responsive sans media query.grid-column: 1 / 3 (de la ligne 1 à la ligne 3), span 2, 1 / -1 (toute la largeur).grid-template-areas + grid-area : dessiner la page. place-items: center pour centrer.Une seule ligne pour tous les écrans
| la grille entière dans le conteneur, si elle est plus petite |
justify-self / align-self | un élément | un seul élément dans sa cellule |
Vidéo · À regarder
ENCSS Full Course for Beginners | Complete All-in-One Tutorial | 11 Hours
Dave Gray · YouTube
| Grid |
grid-template-areas |
| le contenu d'une carte (image, texte, bouton en bas) | Flexbox | une colonne |
| des étiquettes de tailles différentes qui passent à la ligne | Flexbox | chaque ligne indépendante |
Grid dans la formation de L'instant Code : sept minutes et demie pour découvrir la grille. Refais chaque exemple.
Une vidéo française de 32 minutes entièrement consacrée à CSS Grid. C'est la vidéo de référence de ce chapitre : regarde-la en deux fois, avant et après les sections 3 à 5.
Tableau: Les fonctions de Grid
.galerie {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
}.tableau-de-bord {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 80px auto; /* 1re ligne : 80px, 2e : selon le contenu */
grid-auto-rows: minmax(150px, auto); /* les lignes créées en plus */
gap: 1rem 2rem; /* 1rem entre les lignes, 2rem entre les colonnes */
}Quand il y a plus d'éléments que de cases prévues, Grid crée automatiquement de nouvelles lignes (la grille implicite). grid-auto-rows fixe leur hauteur.
Une grille de 3 colonnes a 4 lignes verticales, numérotées 1, 2, 3, 4 de gauche à droite (et −1 pour la dernière). grid-column: 1 / 3 signifie « de la ligne 1 à la ligne 3 », donc sur deux colonnes. span 2 signifie « sur deux pistes à partir d'ici ».
.a-la-une {
grid-column: 1 / 3; /* de la ligne 1 à la ligne 3 = colonnes 1 et 2 */
grid-row: span 2; /* sur deux lignes */
}
.pleine-largeur {
grid-column: 1 / -1; /* de la première à la dernière ligne */
}<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:6px;font-family:Inter,sans-serif;font-size:8pt;text-align:center;color:#fff">
<div style="grid-column:1 / 3;grid-row:1 / 3;background:#c0392b;padding:24px 6px">à la une : grid-column 1 / 3, grid-row span 2</div><div style="grid-column:3;grid-row:1;background:#2f5bc4;padding:10px">2</div><div style="grid-column:3;grid-row:2;background:#2f5bc4;padding:10px">3</div><div style="grid-column:1 / 4;grid-row:3;background:#17306e;padding:8px">pleine largeur : grid-column 1 / -1</div>
</div>grid-column: 1 / 2 ne couvre qu'une seule colonne : on donne des numéros de lignes, pas de colonnes. Pour couvrir les colonnes 1 et 2, il faut 1 / 3 (ou 1 / span 2). Active l'option Grid dans l'onglet Elements des DevTools : Chrome et Firefox affichent les numéros des lignes directement sur la page.
.page {
display: grid;
grid-template-columns: 240px 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"entete entete"
"lateral contenu"
"pied pied";
min-height: 100vh;
gap: 1rem;
}
header { grid-area: entete; }
aside { grid-area: lateral; }
main { grid-area: contenu; }
footer { grid-area: pied; }<div style="display:grid;grid-template-columns:90px 1fr;grid-template-rows:auto 60px auto;grid-template-areas:'entete entete' 'lateral contenu' 'pied pied';gap:5px;font-family:Inter,sans-serif;font-size:8pt;color:#fff;text-align:center">
<div style="grid-area:entete;background:#17306e;padding:8px">header · entete</div><div style="grid-area:lateral;background:#2e9a52;padding:8px">aside · lateral</div><div style="grid-area:contenu;background:#2f5bc4;padding:8px">main · contenu</div><div style="grid-area:pied;background:#c49a12;padding:8px">footer · pied</div>
</div>. désigne une cellule vide ;grid-area: nom;.grid-template-areas est sans doute la fonctionnalité la plus lisible du CSS : on voit la mise en page dans le code. Et pour la version mobile (chapitre 11), il suffit de redessiner le plan dans une media query, sans toucher au HTML.
Tableau: Les propriétés d'alignement
Tableau: Le bon outil pour chaque situation
Termine les 28 niveaux de Grid Garden.
Transforme la section « Projets » de ton CV en grille responsive : colonnes de 280px minimum qui remplissent la largeur, espace de 2rem. Le premier projet est mis en avant : il occupe deux colonnes quand la place le permet.
Avec grid-template-areas, crée la structure d'un site de blog : en-tête sur toute la largeur, contenu principal à gauche (2fr), barre latérale à droite (1fr), pied de page sur toute la largeur. Le pied de page reste en bas même si le contenu est court.
Le navigateur se demande : « combien de colonnes d'au moins 250 px puis-je placer ? ». Sur un écran de 1200 px : quatre colonnes. Sur une tablette de 800 px : trois. Sur un téléphone de 375 px : une seule. Aucune media query n'est nécessaire. Cette ligne figure dans presque tous les sites modernes.
La différence n'apparaît que quand il y a peu d'éléments. Avec auto-fit, les colonnes vides sont supprimées et les éléments s'étirent pour remplir la ligne. Avec auto-fill, les colonnes vides sont conservées et les éléments gardent leur taille. Dans le doute, auto-fit.
.centre {
display: grid;
place-items: center;
min-height: 100vh;
}Le chapitre « Grid Layout » de Dave Gray (anglais) : vingt-cinq minutes de révision de tout le chapitre.
« Est-ce que je veux que les éléments s'alignent aussi dans l'autre direction ? » Si oui (les cartes de la deuxième ligne doivent être exactement sous celles de la première), c'est Grid. Si chaque ligne vit sa vie, c'est Flexbox. Et les deux se combinent très bien : une page en Grid, dont chaque carte est en Flexbox.
Grid Garden (cssgridgarden.com, disponible en français) : 28 niveaux pour arroser ton potager avec CSS Grid. C'est l'équivalent de Flexbox Froggy pour Grid.
Avec grid-template-columns: repeat(4, 1fr);, décris la position de ces éléments : (a) grid-column: 1 / -1; ; (b) grid-column: span 2; (troisième élément, après deux éléments simples) ; (c) grid-column: 3 / 5; grid-row: 1 / 3;.