Skip to main content

Chapitre 9 : Introduction à la grille CSS : Définition des colonnes et lignes

Concepts clés : grid-template-columns, grid-template-rows, fr unit

Le CSS Grid Layout est sans doute l'outil le plus puissant jamais ajouté au CSS pour la mise en page. Contrairement à Flexbox, qui est conçu pour aligner des éléments sur un seul axe (soit horizontalement, soit verticalement), CSS Grid est un système bi-dimensionnel. Cela signifie qu'il peut gérer simultanément les colonnes et les lignes.

Imaginez CSS Grid comme un tableau invisible que vous dessinez sur votre page, et dans lequel vous venez placer vos éléments.

Architecture d'une Grille CSS​

Le Container Grid​

1. Quoi​

Le Grid Container est l'élément parent sur lequel on active le mode grille. Pour transformer un élément HTML classique en grille, on utilise la propriété display: grid (ou display: inline-grid).

Dès que cette propriété est appliquée, tous les enfants directs de cet élément deviennent des Grid Items.

2. Pourquoi​

L'utilisation d'un container grid permet de centraliser la logique de mise en page. Au lieu de donner des marges ou des largeurs fixes à chaque enfant (ce qui rend le code rigide et difficile à maintenir), on définit la structure globale sur le parent. Les enfants se placent alors naturellement dans les "cases" définies par le parent.

3. Comment​

A. Syntaxe de base​

L'activation est immédiate :

.container {
  display: grid;
}

B. Cas concret​

Dans un projet réel, on combine souvent l'activation de la grille avec un espacement entre les cellules via la propriété gap.

.main-layout {
  display: grid;
  /* Définit l'espace entre les colonnes et les lignes */
  gap: 1rem; 
  /* On définit ici une structure simple de 3 colonnes égales */
  grid-template-columns: 1fr 1fr 1fr;
}

C. Limitations​

Le mode display: grid n'affecte que les enfants directs. Si vous avez un élément imbriqué plus profondément dans le DOM, il ne sera pas soumis aux règles de la grille du parent, à moins que vous ne transformiez également cet enfant en container grid.

4. Zone de Danger​

❌ Erreur commune : Essayer de positionner des éléments en utilisant float ou position: absolute à l'intérieur d'une grille pour créer la structure.

✅ Bonne pratique : Laissez le container définir la structure via grid-template-columns et grid-template-rows.

Définition des Colonnes et Lignes​

C'est ici que la magie opère. Une fois le container activé, vous devez lui dire combien de colonnes et de lignes il doit créer.

1. Quoi​

  • grid-template-columns : Définit le nombre et la largeur des colonnes.
  • grid-template-rows : Définit le nombre et la hauteur des lignes.

Chaque valeur séparée par un espace dans ces propriétés crée une nouvelle colonne ou ligne.

2. Pourquoi​

Cela permet de créer des mises en page complexes (comme un dashboard, un journal ou un e-commerce) sans avoir à calculer manuellement des pourcentages complexes ou à gérer des "clear-fix". Vous décrivez simplement la structure souhaitée.

3. Comment​

A. Syntaxe de base​

Si vous voulez 3 colonnes de 200px chacune :

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

B. Cas concret : Le mélange d'unités​

En production, on mélange rarement des pixels fixes avec des unités flexibles. Voici un exemple de mise en page "Sidebar + Contenu" :

.page-wrapper {
  display: grid;
  /* Colonne 1 : 250px fixes (Sidebar) */
  /* Colonne 2 : Prend tout le reste de l'espace disponible */
  grid-template-columns: 250px 1fr;
  
  /* Ligne 1 : 60px (Header) */
  /* Ligne 2 : S'adapte au contenu (auto) */
  /* Ligne 3 : 100px (Footer) */
  grid-template-rows: 60px auto 100px;
  
  min-height: 100vh;
}

C. Limitations​

Si vous définissez 3 colonnes mais que vous avez 10 éléments enfants, CSS Grid créera automatiquement des lignes supplémentaires (ce qu'on appelle la grille implicite) pour accueillir les éléments restants.

4. Zone de Danger​

❌ Erreur commune : Utiliser des pourcentages (grid-template-columns: 33% 33% 33%) avec un gap. Le total dépassera 100% et créera un scroll horizontal indésirable.

✅ Bonne pratique : Utilisez l'unité fr pour les dimensions flexibles.

L'unité Fractionnelle (fr)​

1. Quoi​

L'unité fr (fractional unit) est une unité spécifique à CSS Grid. Elle représente une fraction de l'espace libre restant dans le container après que tous les éléments à taille fixe (px, em, %) ont été soustraits.

2. Pourquoi​

C'est la solution ultime au problème du "calcul des pourcentages". Si vous voulez trois colonnes égales, 1fr 1fr 1fr distribuera exactement 33.33% de l'espace disponible à chacune, tout en gérant intelligemment les gap sans provoquer de débordement.

3. Comment​

A. Syntaxe de base​

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

Ici, la colonne centrale sera deux fois plus large que les colonnes latérales.

B. Cas concret : Mise en page adaptative​

Imaginons une galerie d'images où l'image principale doit être dominante :

.gallery {
  display: grid;
  /* 3 colonnes : la première prend 2 parts, les autres 1 part chacune */
  grid-template-columns: 2fr 1fr 1fr;
  gap: 1rem;
}

C. Limitations​

L'unité fr ne fonctionne que dans les propriétés de template de grille (grid-template-columns et grid-template-rows). Vous ne pouvez pas l'utiliser pour définir la width ou la height d'un élément classique.

4. Zone de Danger​

❌ Erreur commune : Confondre 1fr et 100%.

  • 100% force l'élément à faire la taille du parent, ignorant les gaps.
  • 1fr prend l'espace disponible après déduction des gaps.

Questions clés​

Q1 : Quelle est la différence fondamentale entre Flexbox et CSS Grid ?

Découvrir la réponse

Flexbox est unidimensionnel (une ligne OU une colonne), tandis que CSS Grid est bidimensionnel (lignes ET colonnes simultanément). On utilise Flexbox pour aligner des éléments dans un composant, et Grid pour structurer la mise en page globale d'une page ou d'un composant complexe.

Q2 : Que se passe-t-il si je définis 2 colonnes mais que j'ai 6 éléments enfants ?

Découvrir la réponse

CSS Grid placera les 2 premiers éléments sur la première ligne, les 2 suivants sur la deuxième, et les 2 derniers sur la troisième. Il crée automatiquement des lignes supplémentaires (grille implicite) pour s'assurer que tout le contenu est affiché.

Q3 : Pourquoi préférer 1fr à 33.33% ?

Découvrir la réponse

Parce que l'unité fr prend en compte les gap. Si vous mettez 33.33% avec un gap: 20px, la largeur totale sera (33.33% * 3) + 40px, ce qui dépasse 100% et crée un scroll horizontal. 1fr calcule l'espace après avoir retiré les 40px de gap.

Q4 : Peut-on mélanger des unités fixes et des unités fr ?

Découvrir la réponse

Oui, et c'est même recommandé. Par exemple, grid-template-columns: 200px 1fr; est le pattern standard pour une barre latérale fixe et un contenu principal flexible.

Mise en pratique​

Exercice 1 : Reproduction guidée​

Objectif : Créer une structure de base de site web.

  • Un container grid.
  • 3 colonnes : une sidebar gauche (200px), un contenu central flexible, et une sidebar droite (150px).
  • 2 lignes : un header (80px) et un corps de page qui s'adapte au contenu.
  • Un espacement de 15px entre toutes les cellules.
Découvrir la solution commentée
.site-container {
  display: grid;
  /* Définition des 3 colonnes : fixe, flexible, fixe */
  grid-template-columns: 200px 1fr 150px;
  /* Définition des 2 lignes : fixe, automatique */
  grid-template-rows: 80px auto;
  /* Espacement uniforme */
  gap: 15px;
}

Exercice 2 : Adaptation​

Objectif : Transformer une grille simple en grille asymétrique. Vous avez le code suivant :

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

Modifiez-le pour que la colonne du milieu soit trois fois plus large que les deux autres, et ajoutez une ligne de pied de page (footer) fixe de 50px en bas.

Découvrir la solution commentée
.grid {
  display: grid;
  /* 1 part, 3 parts, 1 part pour le ratio 1:3:1 */
  grid-template-columns: 1fr 3fr 1fr;
  /* On ajoute une ligne automatique pour le contenu et une fixe pour le footer */
  grid-template-rows: auto 50px;
}

Exercice 3 : Conception​

Objectif : Créer un layout de "Dashboard de Statistiques". Le client souhaite :

  • Une barre de navigation étroite à gauche (80px).
  • Une zone principale divisée en 3 colonnes :
    • La première colonne prend 1 part.
    • La deuxième colonne prend 2 parts.
    • La troisième colonne prend 1 part.
  • Le tout doit avoir un espacement de 2rem.
  • Le container doit occuper toute la hauteur de l'écran.

Indice : Vous devrez peut-être imbriquer une grille dans une autre ou utiliser une structure de colonnes globale.

Découvrir la solution commentée
/* Solution via une grille globale */
.dashboard {
  display: grid;
  /* 
     Colonne 1 : Nav (80px)
     Colonne 2, 3, 4 : Le contenu principal divisé en 1fr 2fr 1fr
  */
  grid-template-columns: 80px 1fr 2fr 1fr;
  gap: 2rem;
  min-height: 100vh;
}

/* 
   Note : Dans un cas réel, on pourrait aussi faire :
   .dashboard { display: grid; grid-template-columns: 80px 1fr; }
   .main-content { display: grid; grid-template-columns: 1fr 2fr 1fr; }
*/