Cours HTML et CSS · Module 8: CSS Grid
CSS Grid : le système moderne de mise en page
Dans cette leçon3
CSS Grid est un système de mise en page puissant qui donne aux développeurs web le contrôle sur l'agencement des éléments à la fois horizontalement et verticalement. C'est un outil incroyablement flexible qui peut considérablement simplifier la conception d'interfaces utilisateur responsives.
Les bases de CSS Grid
Grid est un système de mise en page bidimensionnel, ce qui signifie que tu peux contrôler les éléments aussi bien en colonnes qu'en lignes. Voici quelques concepts fondamentaux :
Le conteneur Grid
Pour définir un conteneur grid, utilise la propriété display: grid ou display: inline-grid.
1.container {
2 display: grid;
3}Colonnes et lignes
Tu définis les colonnes et les lignes à l'aide des propriétés grid-template-columns et grid-template-rows. Ces valeurs peuvent être exprimées dans différentes unités, comme les pixels, les pourcentages ou les fractions (fr).
1.container {
2 display: grid;
3 grid-template-columns: 1fr 2fr 1fr;
4 grid-template-rows: 100px 200px;
5}Les espacements (gaps)
Tu peux aussi définir l'espacement entre les colonnes et les lignes grâce aux propriétés grid-gap, grid-row-gap et grid-column-gap.
1.container {
2 grid-gap: 10px;
3 grid-row-gap: 15px;
4 grid-column-gap: 15px;
5}Les éléments de la grille (grid items)
Les éléments à l'intérieur d'un conteneur grid sont automatiquement traités comme des grid items. Tu peux les placer dans des colonnes et des lignes précises à l'aide des propriétés grid-column et grid-row.
1.item {
2 grid-column: 1 / 3;
3 grid-row: 2 / 4;
4}Applications avancées de CSS Grid
Les zones de grille (grid areas)
Grid te permet de nommer des zones, ce qui peut simplifier la gestion de la mise en page.
1.container {
2 grid-template-areas:
3 "header header header"
4 "menu content sidebar"
5 "footer footer footer";
6}
7.header {
8 grid-area: header;
9}La responsivité
Grâce aux unités flexibles et aux media queries, CSS Grid est parfait pour créer des mises en page responsives.
1.container {
2 display: grid;
3 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
4}L'imbrication
Tu peux aussi imbriquer des conteneurs grid, ce qui permet de créer des mises en page plus complexes.
Construire une mise en page avec CSS Grid peut se comparer à l'édification d'une pyramide. Tout comme les pyramides antiques étaient bâties à partir de blocs de pierre disposés avec précision, une structure en grille se compose de colonnes et de lignes définies avec exactitude.
- Le conteneur Grid : c'est comme les fondations d'une pyramide, sur lesquelles repose toute la structure.
- Les colonnes et les lignes : ce sont comme les couches successives de pierres qui forment la structure de la pyramide.
- Les grid items : ce sont comme les pierres individuelles, chacune placée précisément à la bonne position.
Avantages et inconvénients
Avantages :
- Flexibilité : Grid offre une flexibilité inégalée pour créer des mises en page variées.
- Code propre : il permet de créer des mises en page complexes sans code HTML et CSS superflu.
- Facilité d'utilisation : une fois compris, grid est simple à utiliser et efficace.
Inconvénients :
- Compatibilité : tous les navigateurs ne prennent pas en charge toutes les fonctionnalités de CSS Grid, même si la situation s'améliore constamment.
- Courbe d'apprentissage : pour certains utilisateurs, l'apprentissage initial peut être difficile.
CSS Grid est un outil puissant qui change profondément la manière dont les designers et les développeurs peuvent créer des mises en page web. Il offre de nombreuses fonctionnalités avancées et une flexibilité qui permettent de concevoir des interfaces utilisateur sophistiquées et responsives. L'analogie de la construction d'une pyramide souligne la précision et la solidité qui sont essentielles pour comprendre et utiliser efficacement cet outil.
Code de cette leçon : index.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Grid - Bases et techniques avancées</title>
7 <link rel="stylesheet" href="style.css">
8</head>
9<body>
10 <div class="container">
11 <h1>CSS Grid - Le guide complet</h1>
12
13 <section class="demo-section">
14 <h2>Conteneur Grid de base</h2>
15 <div class="basic-grid">
16 <div class="grid-item">Item 1</div>
17 <div class="grid-item">Item 2</div>
18 <div class="grid-item">Item 3</div>
19 <div class="grid-item">Item 4</div>
20 <div class="grid-item">Item 5</div>
21 <div class="grid-item">Item 6</div>
22 </div>
23 <p class="description">Grille avec 3 colonnes et lignes automatiques</p>
24 </section>
25
26 <section class="demo-section">
27 <h2>Grille avec fractions (fr)</h2>
28 <div class="fraction-grid">
29 <div class="grid-item">1fr</div>
30 <div class="grid-item">2fr</div>
31 <div class="grid-item">1fr</div>
32 </div>
33 <p class="description">Colonnes : 1fr 2fr 1fr - la colonne du milieu est 2x plus large</p>
34 </section>
35
36 <section class="demo-section">
37 <h2>Grid Areas (zones nommées)</h2>
38 <div class="areas-grid">
39 <div class="header">Header</div>
40 <div class="sidebar">Sidebar</div>
41 <div class="content">Main Content</div>
42 <div class="footer">Footer</div>
43 </div>
44 <p class="description">Mise en page avec zones nommées : header, sidebar, content, footer</p>
45 </section>
46
47 <section class="demo-section">
48 <h2>Grid Gap (espacement)</h2>
49 <div class="gap-grid">
50 <div class="grid-item">Item 1</div>
51 <div class="grid-item">Item 2</div>
52 <div class="grid-item">Item 3</div>
53 <div class="grid-item">Item 4</div>
54 </div>
55 <p class="description">Grille avec gap: 20px entre les éléments</p>
56 </section>
57
58 <section class="demo-section">
59 <h2>Grille responsive avec auto-fit</h2>
60 <div class="responsive-grid">
61 <div class="card">Card 1</div>
62 <div class="card">Card 2</div>
63 <div class="card">Card 3</div>
64 <div class="card">Card 4</div>
65 <div class="card">Card 5</div>
66 <div class="card">Card 6</div>
67 </div>
68 <p class="description">repeat(auto-fit, minmax(200px, 1fr)) - ajustement automatique</p>
69 </section>
70
71 <section class="demo-section">
72 <h2>Nested Grid</h2>
73 <div class="nested-parent">
74 <div class="nested-item">Item 1</div>
75 <div class="nested-item nested-grid">
76 <div class="nested-child">Sub 1</div>
77 <div class="nested-child">Sub 2</div>
78 <div class="nested-child">Sub 3</div>
79 <div class="nested-child">Sub 4</div>
80 </div>
81 <div class="nested-item">Item 3</div>
82 </div>
83 <p class="description">Grille imbriquée dans un élément de grille</p>
84 </section>
85
86 <section class="demo-section">
87 <h2>Grid Line Positioning</h2>
88 <div class="positioned-grid">
89 <div class="positioned-item span-item">S'étend sur 2 colonnes</div>
90 <div class="positioned-item">Item 2</div>
91 <div class="positioned-item">Item 3</div>
92 <div class="positioned-item tall-item">Élément haut</div>
93 <div class="positioned-item">Item 5</div>
94 </div>
95 <p class="description">Positionnement précis des éléments à l'aide des lignes de grille</p>
96 </section>
97
98 <section class="demo-section">
99 <h2>CSS Grid avec CSS Custom Properties</h2>
100 <div class="custom-props-grid">
101 <div class="custom-item">Dynamic 1</div>
102 <div class="custom-item">Dynamic 2</div>
103 <div class="custom-item">Dynamic 3</div>
104 <div class="custom-item">Dynamic 4</div>
105 </div>
106 <p class="description">Grille utilisant les CSS Custom Properties (variables)</p>
107 </section>
108
109 <section class="demo-section">
110 <h2>Advanced Layout - Dashboard</h2>
111 <div class="dashboard-grid">
112 <div class="dash-header">En-tête du tableau de bord</div>
113 <div class="dash-nav">Navigation</div>
114 <div class="dash-main">
115 <div class="dash-widget">Widget 1</div>
116 <div class="dash-widget">Widget 2</div>
117 <div class="dash-widget">Widget 3</div>
118 <div class="dash-widget">Widget 4</div>
119 </div>
120 <div class="dash-sidebar">Sidebar</div>
121 <div class="dash-footer">Footer</div>
122 </div>
123 <p class="description">Mise en page de tableau de bord complète avec grid</p>
124 </section>
125 </div>
126</body>
127</html>Tu as repéré une erreur dans cette leçon ?
Teste tes connaissances
Réponds aux questions de cette leçon. Choisis une réponse pour voir tout de suite si elle est correcte.
1. Comment crée-t-on un conteneur CSS Grid ?
2. Quelle propriété définit les colonnes dans CSS Grid ?
Voici 2 des 3 questions de cette leçon. Réponds aux autres dans le jeu.
Tâches pratiques dans le jeu
- Éditeur de code
Crée .temple-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); gap: 15px }. Ajoute 9 éléments .stone. Résultat : une grille 3x3 régulière comme les fondations d'Abou Simbel !
- Tri horizontal
Ordonne la déclaration grid-template-columns avec un ratio 1:2:1 :