Guide : CSS Grid Layout pour des mises en page modernes

CSS Grid : le système de mise en page le plus puissant

CSS Grid permet de créer des mises en page en 2 dimensions (lignes ET colonnes) de manière simple et intuitive. C’est l’outil idéal pour les layouts complexes que Flexbox ne gère pas facilement.

Grille basique

<div class="grille">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
</div>

<style>
.grille {
    display: grid;
    grid-template-columns: repeat(3, 1fr);  /* 3 colonnes égales */
    gap: 20px;                               /* Espace entre les cellules */
    padding: 20px;
}

.item {
    background: #667eea;
    color: white;
    padding: 30px;
    text-align: center;
    border-radius: 8px;
    font-size: 24px;
}
</style>

Définir les colonnes et lignes

/* Colonnes de tailles différentes */
.grille {
    display: grid;
    grid-template-columns: 250px 1fr 1fr;  /* Sidebar fixe + 2 colonnes flexibles */
}

/* Unité fr = fraction de l'espace disponible */
grid-template-columns: 1fr 2fr 1fr;  /* 25% - 50% - 25% */

/* Répéter un pattern */
grid-template-columns: repeat(4, 1fr);     /* 4 colonnes égales */
grid-template-columns: repeat(3, 1fr 2fr); /* Alternance petite/grande */

/* Colonnes automatiques (responsive sans media queries !) */
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
/* Crée autant de colonnes que possible, minimum 280px chacune */

/* Lignes */
grid-template-rows: 80px 1fr 60px;  /* Header - Contenu - Footer */

Layout de page complète avec grid-template-areas

.page {
    display: grid;
    grid-template-columns: 250px 1fr;
    grid-template-rows: 70px 1fr 50px;
    grid-template-areas:
        "header  header"
        "sidebar contenu"
        "footer  footer";
    min-height: 100vh;
    gap: 0;
}

.header  { grid-area: header;  background: #1a1a2e; color: white; }
.sidebar { grid-area: sidebar; background: #f5f5f5; padding: 20px; }
.contenu { grid-area: contenu; padding: 30px; }
.footer  { grid-area: footer;  background: #333; color: white; }

/* Responsive : empiler sur mobile */
@media (max-width: 768px) {
    .page {
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "contenu"
            "sidebar"
            "footer";
    }
}

Positionner les éléments sur la grille

/* Un élément qui prend 2 colonnes */
.item-large {
    grid-column: span 2;
}

/* Un élément qui prend 2 lignes */
.item-tall {
    grid-row: span 2;
}

/* Position précise : de la ligne 1 à 3 */
.item-hero {
    grid-column: 1 / 3;  /* Colonnes 1 et 2 */
    grid-row: 1 / 2;     /* Ligne 1 */
}

/* Raccourci : grid-column: début / fin */
.sidebar { grid-column: 1 / 2; grid-row: 1 / 4; }

Alignement dans la grille

.grille {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    
    /* Aligner les éléments horizontalement */
    justify-items: center;  /* start | center | end | stretch */
    
    /* Aligner les éléments verticalement */
    align-items: center;    /* start | center | end | stretch */
    
    /* Centrer la grille elle-même */
    justify-content: center;
    align-content: center;
}

/* Aligner un seul élément */
.item-special {
    justify-self: end;
    align-self: start;
}

/* Centrer parfaitement un élément */
.grille-centree {
    display: grid;
    place-items: center;  /* Raccourci pour align-items + justify-items */
    min-height: 100vh;
}

Grid vs Flexbox : quand utiliser quoi ?

En pratique : utilisez Grid pour la structure de la page et Flexbox pour les composants à l’intérieur.

Dashboard responsive avec Grid

.dashboard {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(150px, auto);
    gap: 20px;
    padding: 20px;
}

.widget-large { grid-column: span 2; grid-row: span 2; }
.widget-wide  { grid-column: span 2; }
.widget-tall  { grid-row: span 2; }

@media (max-width: 768px) {
    .dashboard { grid-template-columns: repeat(2, 1fr); }
    .widget-large { grid-column: span 2; grid-row: span 1; }
}

@media (max-width: 480px) {
    .dashboard { grid-template-columns: 1fr; }
    .widget-large, .widget-wide { grid-column: span 1; }
}

Exercice pratique