Développement Web

Guide : CSS Grid Layout pour des mises en page modernes

14 min de lecture

Prérequis

  • Niveau : bases CSS (sélecteurs, modèle de boîte, unités). Idéalement avoir lu notre tutoriel Flexbox.
  • Outils : VS Code, Chrome ou Firefox (les Grid Inspectors sont excellents dans les deux).
  • Temps estimé : 1 h pour parcourir, 2 à 3 h pour reproduire les exemples.

Pourquoi CSS Grid ?

Là où Flexbox aligne sur un axe, CSS Grid travaille en 2 dimensions (lignes et colonnes) à la fois. C’est l’outil pour la structure d’une page, les dashboards, les galeries, les magazines en ligne. Combinez les deux : Grid pour le squelette, Flexbox pour le contenu interne.

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

Voici la mise en pratique pour Grille basique. Le bloc ci-dessous est copiable directement dans votre projet, lisible ligne par ligne. Lisez-le une première fois en survol pour repérer la structure générale, puis adaptez les noms de variables, identifiants et valeurs à votre contexte avant de l’exécuter en local.

<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

Voici la mise en pratique pour Définir les colonnes et lignes. Le bloc ci-dessous est copiable directement dans votre projet, lisible ligne par ligne. Lisez-le une première fois en survol pour repérer la structure générale, puis adaptez les noms de variables, identifiants et valeurs à votre contexte avant de l’exécuter en local.

/* 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

Voici la mise en pratique pour Layout de page complète avec grid-template-areas. Le bloc ci-dessous est copiable directement dans votre projet, lisible ligne par ligne. Lisez-le une première fois en survol pour repérer la structure générale, puis adaptez les noms de variables, identifiants et valeurs à votre contexte avant de l’exécuter en local.

.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";
    }
}

💡 grid-template-areas en mots simples

C’est comme dessiner votre page sur du papier quadrillé. Chaque mot représente une zone. Les zones identiques qui se suivent forment un bloc. C’est la méthode la plus visuelle et lisible pour créer des layouts.

Positionner les éléments sur la grille

Voici la mise en pratique pour Positionner les éléments sur la grille. Le bloc ci-dessous est copiable directement dans votre projet, lisible ligne par ligne. Lisez-le une première fois en survol pour repérer la structure générale, puis adaptez les noms de variables, identifiants et valeurs à votre contexte avant de l’exécuter en local.

/* 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

Voici la mise en pratique pour Alignement dans la grille. Le bloc ci-dessous est copiable directement dans votre projet, lisible ligne par ligne. Lisez-le une première fois en survol pour repérer la structure générale, puis adaptez les noms de variables, identifiants et valeurs à votre contexte avant de l’exécuter en local.

.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 ?

CSS Grid Flexbox
Layout 2D (lignes + colonnes) Layout 1D (ligne OU colonne)
Mise en page globale Composants (navbar, cards, buttons)
Grilles complexes, dashboards Alignement, distribution d’espace
Le layout est défini par le parent Le layout dépend du contenu

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

Dashboard responsive avec Grid

Voici la mise en pratique pour Dashboard responsive avec Grid. Le bloc ci-dessous est copiable directement dans votre projet, lisible ligne par ligne. Lisez-le une première fois en survol pour repérer la structure générale, puis adaptez les noms de variables, identifiants et valeurs à votre contexte avant de l’exécuter en local.

.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; }
}

Erreurs fréquentes

« Mes éléments débordent de la grille »

Cause : les enfants ont une min-width implicite qui empêche le rétrécissement (notamment les img).
Solution : ajoutez min-width: 0 sur les enfants concernés, ou utilisez minmax(0, 1fr) dans grid-template-columns.

auto-fill vs auto-fit

Symptôme : avec auto-fill, des colonnes vides apparaissent quand il y a peu d’enfants.
Solution : utilisez auto-fit à la place : il fusionne les colonnes vides pour étirer les éléments existants.

grid-template-areas ne fonctionne pas

Cause : chaque ligne de la chaîne doit avoir le même nombre de colonnes, et chaque zone nommée doit former un rectangle (impossible d’avoir des zones en L).
Solution : alignez les guillemets verticalement et utilisez un point . pour les cellules vides.

Confusion gap vs margin

Cause : ajouter margin aux items casse l’alignement de la grille.
Solution : utilisez exclusivement gap (anciennement grid-gap) pour l’espacement entre cellules.

Exercice pratique

🎯 Défi : Layout complet avec CSS Grid

  1. Créez un layout de page avec grid-template-areas : header, sidebar, contenu, footer
  2. Le contenu contient une grille de 6 cartes avec auto-fill et minmax
  3. Une carte « featured » prend 2 colonnes
  4. Sur mobile : tout en 1 colonne, sidebar après le contenu
  5. Bonus : créez un dashboard avec des widgets de tailles variées

Étape 3 : grid-template-areas

Voici la mise en pratique pour Étape 3 : grid-template-areas. Le bloc ci-dessous est copiable directement dans votre projet, lisible ligne par ligne. Lisez-le une première fois en survol pour repérer la structure générale, puis adaptez les noms de variables, identifiants et valeurs à votre contexte avant de l’exécuter en local.

.page {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: 'entete entete' 'menu contenu' 'pied pied';
  min-height: 100vh; gap: 16px;
}
.entete { grid-area: entete; }
.menu { grid-area: menu; }
.contenu { grid-area: contenu; }
.pied { grid-area: pied; }

Étape 4 : Subgrid pour aligner enfants

Subgrid universellement supporté depuis Chrome 117 (sept 2023), Firefox 71 (2019), Safari 16 (2022).

.cartes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.carte {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  gap: 8px;
}

Étape 5 : Grilles auto-fit minmax

Voici la mise en pratique pour Étape 5 : Grilles auto-fit minmax. Le bloc ci-dessous est copiable directement dans votre projet, lisible ligne par ligne. Lisez-le une première fois en survol pour repérer la structure générale, puis adaptez les noms de variables, identifiants et valeurs à votre contexte avant de l’exécuter en local.

.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

Étape 6 : Container queries

Voici la mise en pratique pour Étape 6 : Container queries. Le bloc ci-dessous est copiable directement dans votre projet, lisible ligne par ligne. Lisez-le une première fois en survol pour repérer la structure générale, puis adaptez les noms de variables, identifiants et valeurs à votre contexte avant de l’exécuter en local.

.zone { container-type: inline-size; container-name: zone; }
.carte { display: grid; gap: 8px; }
@container zone (min-width: 480px) {
  .carte { grid-template-columns: 120px 1fr; }
}

Étape 7 : Mise en page magazine

Voici la mise en pratique pour Étape 7 : Mise en page magazine. Le bloc ci-dessous est copiable directement dans votre projet, lisible ligne par ligne. Lisez-le une première fois en survol pour repérer la structure générale, puis adaptez les noms de variables, identifiants et valeurs à votre contexte avant de l’exécuter en local.

.magazine {
  display: grid;
  grid-template-columns:
    [marge-debut] 1fr
    [contenu-debut] minmax(0, 720px)
    [contenu-fin] 1fr
    [marge-fin];
  row-gap: 24px;
}
.magazine > * { grid-column: contenu-debut / contenu-fin; }
.magazine .pleine-largeur { grid-column: marge-debut / marge-fin; }

Étape 8 : Accessibilité

Cas OK À éviter
Réordonner illustration et texte sur mobile Si décorative Si elle porte une légende essentielle
Navigation visuellement à droite Si nav après main dans le HTML Si tabulation devient illogique

Étape 9 : Layout masonry

Voici la mise en pratique pour Étape 9 : Layout masonry. Le bloc ci-dessous est copiable directement dans votre projet, lisible ligne par ligne. Lisez-le une première fois en survol pour repérer la structure générale, puis adaptez les noms de variables, identifiants et valeurs à votre contexte avant de l’exécuter en local.

.galerie-photos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-template-rows: masonry;
  gap: 12px;
}

Adaptation au contexte ouest-africain : performance, équipe, marché

Pour un développeur ou une PME basée à Dakar, Abidjan, Bamako, Cotonou, Lomé, Ouagadougou, Niamey ou Conakry qui livre des sites web ou applications custom, trois adaptations pèsent sur le succès des projets. Premièrement, la connectivité 4G inégale impose de réduire le poids des pages au strict nécessaire. Deuxièmement, le profil typique des développeurs disponibles localement est majoritairement formé sur du JavaScript moderne et du PHP, avec une expertise variable sur les outils plus avancés (TypeScript, frameworks edge, design systems). Troisièmement, le coût en FCFA des services cloud doit être anticipé : Hetzner CX22 à 4 500 FCFA/mois reste imbattable pour un démarrage, Cloudflare Pages gratuit pour les sites statiques, Backblaze B2 à 6 USD/TB/mois pour les sauvegardes. Pour les projets B2C qui exigent une latence faible, héberger sur un CDN avec PoP africain (Cloudflare Lagos, Africa Data Centres) divise par trois la latence perçue par rapport à un déploiement européen sans CDN.

Tester sur appareils réels avant la mise en production

Plus important que tous les outils synthétiques, tester son site sur un Android d’entrée de gamme avec une connexion 4G locale dégradée donne le seul verdict qui compte. Galaxy A03 à 200 EUR neuf, Tecno Spark, Itel A60 sont les appareils dominants chez les visiteurs ouest-africains. Sur ces téléphones, un site qui semble rapide sur DevTools peut être laggy en réalité. Pour approfondir sur les patterns frontend modernes, voir aussi le guide événements JavaScript.

Erreurs courantes à éviter en production

Trois patterns reviennent dans les projets web mal exécutés et coûtent cher à corriger plus tard. Premier pattern : copier-coller de code Stack Overflow sans comprendre le contexte d’origine. Une solution qui marche pour un cas particulier devient un bug subtil dans un autre. Deuxième pattern : ignorer les warnings de la console. Chaque warning est un signal qui mérite d’être lu et compris. Troisième pattern : ne pas tester sur de vrais appareils. DevTools simule mais ne remplace pas un test physique sur un Android d’entrée de gamme avec une 4G dégradée. Documenter chaque décision technique majeure dans un fichier ADR (Architecture Decision Record) prend dix minutes et fait gagner des heures lors d’un incident ou d’un audit.

Erreurs courantes à éviter en production

Trois patterns reviennent dans les projets web mal exécutés et coûtent cher à corriger plus tard. Premier pattern : copier-coller de code Stack Overflow sans comprendre le contexte d’origine. Une solution qui marche pour un cas particulier devient un bug subtil dans un autre. Deuxième pattern : ignorer les warnings de la console. Chaque warning est un signal qui mérite d’être lu et compris. Troisième pattern : ne pas tester sur de vrais appareils. DevTools simule mais ne remplace pas un test physique sur un Android d’entrée de gamme avec une 4G dégradée. Documenter chaque décision technique majeure dans un fichier ADR (Architecture Decision Record) prend dix minutes et fait gagner des heures lors d’un incident ou d’un audit.

Pratiques avancées et outils complémentaires

Au-delà des patterns présentés, plusieurs outils et techniques complètent une maîtrise sérieuse du sujet. Premier axe : automatiser la qualité via une pipeline CI (GitHub Actions, GitLab CI) qui exécute tests, linting et audit de sécurité avant chaque déploiement. Cela évite 80 % des régressions introduites par des modifications hâtives. Deuxième axe : monitorer en production avec un outil comme Sentry pour les erreurs JavaScript ou New Relic pour les performances applicatives — la plupart proposent un free tier qui suffit pour démarrer. Troisième axe : documenter les décisions importantes dans un dossier docs/adr/ du projet, avec un format simple (contexte, décision, conséquences). Cette traçabilité paie quand un nouveau membre rejoint l’équipe ou quand un audit externe demande de justifier les choix techniques.

Ressources francophones pour approfondir

Plusieurs ressources gratuites en français permettent de monter en compétence rapidement. MDN Web Docs reste la documentation de référence, intégralement traduite pour la majorité des sujets. FreeCodeCamp propose des parcours de 300+ heures avec exercices interactifs et certificat. JavaScript.info (en français : fr.javascript.info) couvre le langage en profondeur. Grafikart.fr offre des centaines de tutoriels vidéos en français de qualité. Pour la pratique, contribuer à un projet open source via GitHub est l’investissement le plus payant à moyen terme — recruteurs et clients regardent les contributions GitHub avant le CV.

Pratiques avancées et outils complémentaires

Au-delà des patterns présentés, plusieurs outils et techniques complètent une maîtrise sérieuse du sujet. Premier axe : automatiser la qualité via une pipeline CI (GitHub Actions, GitLab CI) qui exécute tests, linting et audit de sécurité avant chaque déploiement. Cela évite 80 % des régressions introduites par des modifications hâtives. Deuxième axe : monitorer en production avec un outil comme Sentry pour les erreurs JavaScript ou New Relic pour les performances applicatives — la plupart proposent un free tier qui suffit pour démarrer. Troisième axe : documenter les décisions importantes dans un dossier docs/adr/ du projet, avec un format simple (contexte, décision, conséquences). Cette traçabilité paie quand un nouveau membre rejoint l’équipe ou quand un audit externe demande de justifier les choix techniques.

Ressources francophones pour approfondir

Plusieurs ressources gratuites en français permettent de monter en compétence rapidement. MDN Web Docs reste la documentation de référence, intégralement traduite pour la majorité des sujets. FreeCodeCamp propose des parcours de 300+ heures avec exercices interactifs et certificat. JavaScript.info (en français : fr.javascript.info) couvre le langage en profondeur. Grafikart.fr offre des centaines de tutoriels vidéos en français de qualité. Pour la pratique, contribuer à un projet open source via GitHub est l’investissement le plus payant à moyen terme — recruteurs et clients regardent les contributions GitHub avant le CV.

Pour creuser ce sujet

Partager
#css #grid #responsive

Articles Similaires