Principes d’UX writing : rédiger pour les interfaces

Ce que vous saurez faire

A la fin de ce tutoriel, vous maitriserez CSS Grid Layout, le systeme de mise en page le plus puissant du web moderne, pour construire des interfaces bidimensionnelles complexes sans une seule ligne de JavaScript. Vous saurez transformer des maquettes Figma en grilles responsive fluides, creer des dashboards de PME avec KPIs alignes parfaitement, batir des galeries de produits qui s’adaptent du Tecno 5 pouces au MacBook 16 pouces, et combiner Grid avec Flexbox pour tirer le meilleur des deux mondes. Vous apprendrez les proprietes fondamentales (grid-template-columns, grid-template-rows, gap, grid-area), les fonctions modernes (repeat(), minmax(), auto-fit, auto-fill), et les techniques avancees (named areas, subgrid, grille asymetrique) pour livrer des designs qui impressionnent vos clients senegalais au budget moyen de 200 000 a 800 000 FCFA.

Etape 1 : Activer Grid et comprendre la terminologie

CSS Grid s’active avec display: grid sur le parent. Le parent devient un grid container, ses enfants deviennent des grid items. Le vocabulaire : les lignes horizontales et verticales qui divisent la grille s’appellent des lines, les espaces entre deux lines sont des tracks (colonnes ou lignes), et l’intersection de 4 lines forme une cell. Un groupe de cells adjacentes forme une area.

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  grid-template-rows: 100px 100px;
  gap: 16px;
}

Etape 2 : Definir des colonnes avec fr

L’unite fr (fraction) est specifique a Grid. Elle distribue l’espace restant proportionnellement. 1fr 1fr 1fr cree 3 colonnes egales. 2fr 1fr 1fr cree une premiere colonne 2 fois plus large. C’est bien plus simple que les pourcentages avec marges.

.dashboard {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 24px;
}
/* Sidebar - Contenu principal - Sidebar droite */

Etape 3 : Utiliser repeat pour les grilles regulieres

Pour une grille de 12 colonnes (classique Bootstrap-like) :

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}

Beaucoup plus court que d’ecrire 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr. On peut combiner : repeat(3, 1fr) 2fr donne 3 colonnes egales puis une 2x plus large.

Etape 4 : Grille auto-responsive avec minmax et auto-fit

La magie de Grid : creer une grille qui s’adapte sans media query. Parfait pour une galerie de produits de PME.

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

Le navigateur cree autant de colonnes qu’il peut, avec minimum 260px et maximum 1fr. Sur un ecran 1440px il y aura 5 colonnes, sur un iPhone SE 375px il y en aura 1. Zero JavaScript, zero media query.

Etape 5 : Difference entre auto-fit et auto-fill

auto-fill remplit la grille avec des colonnes vides si necessaire, auto-fit etire les colonnes existantes pour remplir l’espace. Pour 3 produits sur un ecran large : auto-fill laisse de l’espace vide a droite, auto-fit etire les 3 cartes. Dans 90% des cas, auto-fit est ce que vous voulez.

Etape 6 : Positionner un element sur plusieurs cellules

Un item peut s’etendre sur plusieurs colonnes ou lignes avec grid-column et grid-row.

.featured-produit {
  grid-column: span 2;  /* occupe 2 colonnes */
  grid-row: span 2;     /* occupe 2 lignes */
}
.banner {
  grid-column: 1 / -1;  /* de la premiere a la derniere ligne */
}

Le 1 / -1 signifie « du debut a la fin » : astucieux pour faire une banniere qui traverse toute la largeur.

Etape 7 : Creer un layout avec grid-template-areas

La propriete la plus expressive de Grid : dessiner votre layout en ASCII art.

.app {
  display: grid;
  grid-template-columns: 240px 1fr 300px;
  grid-template-rows: 70px 1fr 60px;
  grid-template-areas:
    "header header header"
    "sidebar main widgets"
    "footer footer footer";
  gap: 16px;
  min-height: 100vh;
}
.app-header  { grid-area: header; }
.app-sidebar { grid-area: sidebar; }
.app-main    { grid-area: main; }
.app-widgets { grid-area: widgets; }
.app-footer  { grid-area: footer; }

On comprend instantanement la structure. Pour un dashboard de gestion de commandes (PME), c’est la methode la plus lisible.

Etape 8 : Adapter le layout en mobile avec les areas

Reorganisez la grille en mobile sans toucher au HTML :

@media (max-width: 768px) {
  .app {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "main"
      "widgets"
      "sidebar"
      "footer";
  }
}

Le sidebar passe apres le contenu sur mobile, ordre logique pour l’UX. Aucun reordering JavaScript necessaire.

Etape 9 : Aligner les items dans leurs cellules

Grid offre 6 proprietes d’alignement : justify-items et align-items sur le container (alignement horizontal et vertical de tous les items), justify-self et align-self sur un item individuel, justify-content et align-content pour centrer la grille entiere si elle est plus petite que le container.

.carte {
  display: grid;
  place-items: center;  /* raccourci : center center */
}

place-items: center est le raccourci le plus connu pour centrer n’importe quoi, horizontalement et verticalement, en une ligne. Solution definitive au probleme du centrage vertical qui hantait le CSS depuis 1996.

Etape 10 : Gap remplace les marges

Oubliez les margin-right: 16px sur les items. Utilisez gap sur le container. C’est plus propre, pas de marge sur le dernier element, adaptable en une variable CSS.

.grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 24px;
  row-gap: 32px;
  /* ou raccourci : gap: 32px 24px; (row puis column) */
}

Etape 11 : Construire un masonry layout

Le layout masonry (Pinterest-style, tuiles de hauteurs variables) etait complique avant. Avec Grid :

.masonry {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-auto-rows: 10px;
  gap: 16px;
}
.masonry-item {
  grid-row-end: span var(--span, 20);
}
/* en JS on calcule --span selon hauteur reelle de chaque item */

Etape 12 : Combiner Grid et Flexbox

Grid pour la structure 2D globale, Flexbox pour l’alignement 1D dans chaque cellule. La combinaison ideale pour une carte produit : Grid positionne les cartes, Flexbox aligne titre/prix/bouton a l’interieur.

.cartes-produits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}
.carte {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.carte .prix { margin-top: auto; }

Etape 13 : Utiliser les grid lines nommees

Pour des layouts complexes, nommez les lines plutot que les numeroter.

.page {
  display: grid;
  grid-template-columns:
    [sidebar-start] 240px
    [sidebar-end main-start] 1fr
    [main-end];
}
.sidebar { grid-column: sidebar-start / sidebar-end; }
.main    { grid-column: main-start / main-end; }

Si vous changez les largeurs plus tard, les noms restent valides : maintenabilite maximale.

Etape 14 : Debugger avec les DevTools

Chrome et Firefox affichent un overlay Grid tres utile. Ouvrez les DevTools, selectionnez un element display: grid, cliquez sur le petit badge « grid » a cote. Vous voyez les lines, leurs numeros, les zones nommees. Indispensable pour comprendre pourquoi un item ne se place pas ou on l’attend. Aussi utile : la propriete outline: 1px solid red sur tous les items pendant le developpement.

Erreurs

• Utiliser Grid pour un alignement 1D (une seule ligne de boutons) : Flexbox est plus simple.
• Oublier minmax() dans repeat(auto-fit, 1fr) : les colonnes deviennent trop etroites.
• Mettre margin sur les items : utilisez gap sur le container.
• Nommer les areas avec un nombre incoherent de cellules : erreur silencieuse.
• Oublier min-width: 0 sur un grid item avec du texte : il deborde sans limite.

Checklist

• Grid active avec display: grid sur le bon container.
• Unites fr utilisees au lieu de pourcentages.
• repeat(auto-fit, minmax(X, 1fr)) utilise pour les grilles responsive.
• gap utilise au lieu de margin.
• Layout principal decrit avec grid-template-areas.
• Media query mobile qui reorganise les areas.
• Centrage fait avec place-items: center.
• Grid combine avec Flexbox dans les cellules.
• Test sur viewport 320px (iPhone SE) a 1920px (desktop) reussi.
• DevTools Grid overlay utilise pour verification finale.