À propos de ce cours
Cette leçon présente la grille de mise en page : son utilité, son anatomie (colonnes, gouttières, marges, conteneur), les types de grilles (une colonne, à colonnes, modulaire, hiérarchique, ligne de base), le calcul de la largeur des colonnes pour un téléphone (4 colonnes), une tablette (8) et un ordinateur (12), et le système d'espacement de 8 px associé à la loi de proximité. Trois activités conduisent à remettre l'écran « Menu du jour » de CantineCampus sur une grille.
| Durée | Niveau | Prérequis | À la fin de la leçon |
|---|---|---|---|
| 1 heure (cours et 3 activités) | Débutant, chapitre « Boutons, animations et mise en page » | Les animations dans une interface | Vous savez construire une grille de colonnes, calculer ses dimensions et organiser un écran avec un système d'espacement |
-
Objectifs
- Définir une grille de mise en page et son utilité.
- Connaître son anatomie: colonnes, gouttières, marges.
- Choisir un type de grille selon le contenu.
- Calculer une grille pour un téléphone, une tablette et un ordinateur.
- Appliquer un système d'espacement de 8 px et la loi de proximité.
-
Pourquoi une grille ?
- Une grille est une structure invisible de lignes qui sert à aligner et à dimensionner les éléments d'un écran.
- Elle donne de l'ordre: les éléments alignés paraissent liés et soignés, même si l'usager ne voit pas la grille.
- Elle fait gagner du temps: on ne se demande plus « quelle largeur pour cette carte ? », la réponse est « deux colonnes ».
- Elle facilite le responsive: on change le nombre de colonnes selon la largeur d'écran, et les éléments se réorganisent selon des règles connues.
- Elle sert de langage commun avec les développeurs : les grilles CSS (Grid, Flexbox), Bootstrap ou Flutter reposent sur la même logique.
-
L'anatomie d'une grille
- Les colonnes: les bandes verticales sur lesquelles on place les éléments. Un élément occupe un nombre entier de colonnes.
- Les gouttières: l'espace vide entre deux colonnes. Elles séparent les éléments voisins.
- Les marges: l'espace entre le bord de l'écran et la première colonne. Elles empêchent le contenu de coller au bord.
- Le conteneur: sur grand écran, la zone centrale où se trouve le contenu, limitée à une largeur maximale (par exemple 1 200 px), pour que les lignes de texte ne deviennent pas trop longues.
-
Les types de grilles
- Une colonne (grille manuscrite) : un bloc de texte ou un formulaire. C'est la mise en page naturelle d'un téléphone.
- À colonnes: la plus courante. 4 colonnes sur téléphone, 8 sur tablette, 12 sur ordinateur. Le chiffre 12 est pratique : il se divise par 2, 3, 4 et 6.
- Modulaire: des colonnes et des rangées, qui forment des cases. Pour une galerie, un tableau de bord.
- Hiérarchique: des blocs de tailles libres selon l'importance du contenu. Pour une page d'accueil éditoriale.
- De ligne de base: des lignes horizontales régulières (tous les 4 ou 8 px) sur lesquelles reposent les textes. Elle donne un rythme vertical.
-
Calculer une grille
- Une grille se décrit avec quatre valeurs: largeur de l'écran (ou du conteneur), nombre de colonnes, marge, gouttière.
- La largeur d'une colonne se calcule : colonne = (largeur − 2 × marge − (colonnes − 1) × gouttière) ÷ colonnes.
- Téléphone de 360 px, 4 colonnes, marges et gouttières de 16 px : (360 − 32 − 48) ÷ 4 = 70 px.
- Tablette de 768 px, 8 colonnes, marges de 24 px, gouttières de 16 px : (768 − 48 − 112) ÷ 8 = 76 px.
- Ordinateur : conteneur centré de 1 200 px, 12 colonnes, gouttières de 24 px : (1 200 − 264) ÷ 12 = 78 px.
- Une carte qui occupe 2 colonnes mesure 2 colonnes + 1 gouttière : sur le téléphone, 70 + 16 + 70 = 156 px.
- En pratique, colonnes et gouttières sont fluides: la colonne s'élargit avec l'écran, les marges et gouttières restent fixes.
🍽 Exemple : CantineCampus
- Sur le téléphone, chaque carte de plat occupe les 4 colonnes: une carte par ligne.
- Sur la tablette, une carte occupe 4 colonnes sur 8: deux cartes par ligne.
- Sur l'ordinateur, une carte occupe 3 colonnes sur 12: trois cartes par ligne, et le panier occupe les 3 dernières colonnes.
-
Le système d'espacement de 8 px
- Toutes les marges, gouttières et espacements sont des multiples de 8: 8, 16, 24, 32, 48. On ajoute 4 pour les petits détails (entre une icône et son texte).
- Pourquoi 8 ? Les tailles d'écran courantes se divisent par 8, et une échelle limitée évite les « 13 px ici, 17 px là » qui donnent une impression de désordre.
- La loi de proximité (Gestalt) : des éléments proches semblent liés. On met un petit espace dans un groupe (8 px entre le nom et le prix d'un plat) et un grand espace entre deux groupes (24 px entre deux cartes).
- Dans Figma, la grille de calques (« Layout grid ») et l'Auto Layout avec des espacements de 8 en 8 appliquent ces règles automatiquement.
⚠ Piège : une grille n'est pas une prison : un élément peut sortir de la grille (une image pleine largeur, par exemple) si c'est un choix volontaire, appliqué de la même façon partout.
-
Aide-mémoire
-
Activités
Activité 1Retrouver la grille · ⏱ 15 min
- Faites une capture de la page d'accueil d'un site d'information sur ordinateur et sur téléphone.
- Dessinez par-dessus, dans Figma, les colonnes, les gouttières et les marges que vous devinez.
- Combien de colonnes ? Combien de colonnes occupe chaque bloc ?
📁 Résultat attendu : les deux captures avec leur grille et le nombre de colonnes de chaque bloc.
Activité 2Calculer trois grilles · ⏱ 15 min
- Calculez la largeur d'une colonne pour : 390 px / 4 colonnes / marge 16 / gouttière 16 ; 834 px / 8 / 32 / 24 ; conteneur 1 140 px / 12 / gouttière 30.
- Calculez la largeur d'un bloc de 2 colonnes dans chaque cas.
- Vérifiez vos résultats en créant les trois grilles dans Figma (Layout grid).
📁 Résultat attendu : les calculs détaillés et les trois cadres Figma.
Activité 3Remettre un écran sur la grille · ⏱ 20 min
- Reprenez l'écran « Menu du jour » de CantineCampus et ajoutez-lui une grille de 4 colonnes (marge 16, gouttière 16).
- Alignez chaque élément sur la grille et remplacez tous les espacements par des valeurs de l'échelle (4, 8, 16, 24, 32).
- Comparez avant et après avec un test du flou (plissez les yeux) : les groupes sont-ils plus lisibles ?
📁 Résultat attendu : l'écran avant / après avec la grille visible.
-
Erreurs fréquentes
| Symptôme | Cause | Solution |
|---|---|---|
| Éléments « presque » alignés | Pas de grille | Une grille de colonnes, et des blocs sur des colonnes entières |
| Espacements de 13, 17, 22 px | Valeurs au hasard | Échelle de 8 px : 8, 16, 24, 32, 48 |
| Groupes difficiles à distinguer | Espacements tous égaux | Petit écart dans un groupe, grand écart entre groupes |
| Lignes de texte immenses sur grand écran | Pas de conteneur | Conteneur centré de 1 200 px au plus |
| Texte collé au bord du téléphone | Pas de marge | Marge de 16 px minimum |
-
Bilan
- La grille aligne et dimensionne les éléments : elle rend l'écran ordonné et le responsive plus simple.
- Elle se compose de colonnes, de gouttières et de marges, dans un conteneur.
- On utilise 4, 8 et 12 colonnes pour le téléphone, la tablette et l'ordinateur.
- Les largeurs se calculent à partir de quatre valeurs.
- Les espacements suivent une échelle de 8 px et la loi de proximité.
Une grille ne se voit pas, mais tout le monde voit quand elle manque.