Chapitre 8 : Grid CSS - Mise en page par grille

Maîtrisez le système de grille CSS pour créer des mises en page complexes et responsives.

1. Qu'est-ce que CSS Grid ?

Grid est un système de mise en page en deux dimensions (lignes + colonnes) introduit dans CSS3. Il permet de créer facilement des interfaces complexes et responsives.

.grille {
                          display: grid;
                        }
                    

2. Définir une grille de base

2.1 Définir les colonnes

.grille {
                          display: grid;
                          grid-template-columns: 200px 1fr 2fr;
                        }
                    

2.2 Définir les lignes

.grille {
                          grid-template-rows: 100px auto;
                        }
                    

2.3 Exemple complet

.grille {
                          display: grid;
                          grid-template-columns: repeat(3, 1fr);
                          gap: 10px;
                        }
                    

3. Placer les éléments dans la grille

3.1 Ordre automatique

Les éléments enfants se placent automatiquement dans la grille par ordre d'apparition.

3.2 Positionnement manuel

.element {
                          grid-column: 1 / 3;
                          grid-row: 2 / 4;
                        }
                    

3.3 Raccourci

.element {
                          grid-area: 2 / 1 / 4 / 3;
                        }
                    

4. Alignement dans la grille

.grille {
                          justify-items: center; /* horizontal */
                          align-items: center;   /* vertical */
                        }
                    

Pour aligner toute la grille dans son parent :

.grille {
                          justify-content: space-between;
                          align-content: center;
                        }
                    

5. Grille responsive

Utilisation de auto-fit et minmax() pour une grille adaptable :

.grille {
                          display: grid;
                          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
                          gap: 1em;
                        }
                    

6. Nommer les zones de la grille

Permet de structurer visuellement et sémantiquement votre mise en page :

.grille {
                          display: grid;
                          grid-template-areas:
                            "entete entete"
                            "menu   contenu"
                            "pied   pied";
                          grid-template-columns: 1fr 3fr;
                          grid-template-rows: auto 1fr auto;
                        }
                    

Puis affecter chaque élément à sa zone :

.entete { grid-area: entete; }
                        .menu   { grid-area: menu; }
                        .contenu { grid-area: contenu; }
                        .pied   { grid-area: pied; }
                    

7. Bonnes pratiques

Utiliser auto-fit avec minmax() pour un design fluide
Utiliser gap au lieu de margin entre les colonnes
Utiliser grid-area pour une lecture facile du layout

8. À éviter

Utiliser Grid pour des alignements simples (préférer Flexbox)
Créer trop de lignes/colonnes fixes sans penser au responsive
Utiliser des noms de zones peu explicites

9. Exercice pratique

Objectif : Créer une mise en page avec entête, menu, contenu et pied de page à l'aide de Grid.

HTML :

<div class="grille">
                          <header class="entete">En-tête</header>
                          <nav class="menu">Menu</nav>
                          <main class="contenu">Contenu principal</main>
                          <footer class="pied">Pied de page</footer>
</div>

CSS :

.grille {
                          display: grid;
                          grid-template-areas:
                            "entete entete"
                            "menu   contenu"
                            "pied   pied";
                          grid-template-columns: 1fr 3fr;
                          gap: 10px;
                        }
                        

.entete  { grid-area: entete; background: #d1c4e9; padding: 1em; }
                        .menu    { grid-area: menu; background: #b39ddb; padding: 1em; }
                        .contenu { grid-area: contenu; background: #9575cd; padding: 1em; }
                        .pied    { grid-area: pied; background: #7e57c2; padding: 1em; }
                    

10. À retenir

CSS Grid permet de construire des mises en page en lignes et colonnes
grid-template-areas améliore la lisibilité de votre structure
Grid est complémentaire à Flexbox, chacun ayant ses cas d'usage