Grille de mise en page d’un site web : sections et colonnes

Une grille de mise en page est le quadrillage invisible sur lequel un site pose ses textes, ses photos et ses boutons : des colonnes, des espaces entre elles (les gouttières) et des marges. Bien choisie, elle donne à toutes les pages d’un hôtel ou d’un restaurant le même air de famille, du grand écran au téléphone. Voici comment découper une page en sections, régler colonnes, espacements et largeur de ligne, puis adapter la grille avec CSS Grid, sur trois pages réelles de ce site.

Une section, une intention, un gabarit

Concevoir un site par grilles, sections et colonnes revient à traiter une page comme une pile de sections. Chacune a une seule intention : accrocher le visiteur, présenter les chambres, rassurer avec des avis, proposer de réserver. Quand la même intention revient, elle reprend le même gabarit (un texte à côté d’une photo, une rangée de cartes), et la grille les tient ensemble avec les mêmes colonnes, gouttières et marges. Elle se fixe dès le wireframe, la maquette en gris faite avant les couleurs.

1. Lister les sections. Noter pour chacune son intention, en une phrase.
2. Choisir un gabarit par intention. Le réutiliser partout où l’intention revient.
3. Fixer la grille une fois pour toutes. Colonnes, gouttière, marges ; puis chaque bloc se place sur des colonnes, jamais « à l’œil ».
4. Vérifier à 375 pixels de large. Chaque gabarit doit se ranger sur une colonne sans rien perdre.

La grille met les mêmes choses au même endroit d’une page à l’autre ; la hiérarchie visuelle décide de ce qu’on voit en premier, et cette répétition sert la simplicité.

Choisir sa grille : colonnes, gouttières, marges

Les colonnes sont les bandes sur lesquelles on place les blocs, les gouttières les espaces entre elles (la propriété CSS gap), les marges l’espace avec le bord de l’écran. MDN présente les notions de base de CSS Grid, un système à deux dimensions : lignes et colonnes en même temps.

Douze colonnes est le choix le plus courant, par arithmétique : 12 se divise par 2, 3, 4 et 6. On obtient moitiés, tiers, quarts, et des découpages comme 7 + 5, pratiques pour un texte à côté d’une photo. Bootstrap repose sur douze colonnes et une gouttière de 1,5 rem par défaut, soit 24 px avec la taille de texte habituelle des navigateurs.

Marges et largeur maximale sont celles de ce site, les gouttières celles de l’extrait de code plus bas. Des points de départ, pas des normes : l’important est de garder les mêmes valeurs sur toutes les pages.

Rythme vertical et espacements

La grille règle l’horizontal ; le rythme vertical règle les espaces entre blocs empilés. Peu de valeurs, toujours les mêmes, qui grandissent avec l’importance de la coupure : deux éléments proches forment un groupe, un grand vide annonce un nouveau sujet.

Les grands systèmes font de même. Le design system du gouvernement britannique propose dix valeurs, de 0 à 60 px, et resserre les plus grandes sur petit écran (60 px devient 40 px). Sur ce site, une section courante ménage de 100 à 150 px de vide au-dessus de son contenu et de 110 à 160 px en dessous, selon l’écran, grâce à clamp().

Largeur de ligne et lisibilité

Un paragraphe sur les douze colonnes d’un grand écran donne des lignes très longues : l’œil perd sa place. Matthew Butterick conseille, dans Practical Typography, 45 à 90 caractères par ligne en moyenne, espaces comprises. Le critère 1.4.8 des WCAG (niveau AAA, le plus exigeant) fixe un plafond de 80 caractères.

Viser 60 à 75 caractères, au milieu de cette fourchette, est un choix de lecture, pas une norme. L’unité ch plafonne une colonne sans compter, mais elle mesure la largeur d’un zéro, plus large que la lettre moyenne : max-width: 68ch contient donc plus de 68 caractères. Nous l’avons mesuré sur cette page, avec sa police : 68 ch donnent en moyenne environ 85 caractères par ligne, 60 ch environ 75 et 55 ch environ 68. Pour 60 à 75 caractères, une valeur de 55 à 60 ch convient donc mieux. Avec les valeurs du tableau (1 320 px de large, gouttière de 28 px), une colonne mesure environ 84 px : un texte de cette taille compte environ 65 caractères par ligne sur cinq colonnes (534 px), mais plus de 90 sur sept (758 px). Un texte courant occupe donc cinq ou six colonnes ; le reste revient à la photo ou au vide.

Du bureau au téléphone : adapter sans doubler le CSS

Le piège est d’écrire une mise en page pour l’ordinateur, puis une seconde pour le téléphone. Google indexe la version mobile des pages et demande le même contenu que sur ordinateur : au téléphone, on empile les blocs, on n’en retire aucun. Le critère 1.4.10 du W3C (niveau AA) demande en plus une lecture sans défilement horizontal dans une fenêtre de 320 pixels CSS de large, l’équivalent d’un écran de 1 280 pixels zoomé à 400 %.

L’extrait suivant pose douze colonnes. Sous 44 rem de large (704 px), tout s’empile ; à partir de là, le texte prend les colonnes 1 à 7, sans dépasser 60 ch, et la photo les colonnes 8 à 12.

.salle { container-type: inline-size; }
.grille {
  --g: clamp(1rem, 4cqi, 1.75rem);
  display: grid;
  gap: var(--g);
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.grille > * { grid-column: 1 / -1; }
@container (min-width: 44rem) {
  .texte { grid-column: 1 / 8; max-width: 60ch; }
  .photo { grid-column: 8 / -1; }
}

1. Un conteneur, pas l’écran. container-type: inline-size fait de .salle un conteneur : la règle @container regarde sa largeur, pas celle de la fenêtre (MDN, requêtes de conteneur).
2. Une gouttière qui s’ajuste. clamp(1rem, 4cqi, 1.75rem) prend 4 % de la largeur du conteneur, sans descendre sous 16 px ni dépasser 28 px (MDN, clamp()).
3. Douze colonnes souples. minmax(0, 1fr) donne à chaque colonne une part égale ; grid-column: 1 / 8 va du trait 1 au trait 8, soit sept colonnes ; max-width: 60ch évite que la ligne s’étire sur les sept quand le conteneur est large.

Nous l’avons essayé sur Chromium, WebKit (le moteur de Safari) et Firefox : même résultat, la page tient sur une colonne sous 44 rem et rien ne déborde jusqu’à 200 px de large. Pour aligner l’intérieur de cartes voisines, une carte peut reprendre les lignes de sa grille parente avec subgrid (MDN).

Exemples sur des pages réelles

Trois pages de ce site, avec leurs colonnes réelles lues dans le style calculé à 1 440 px de large : colonnes en rose, marges en hachures bleues.

L’accueil : deux colonnes inégales

Le haut de la page d’accueil est une grille de deux colonnes dans le rapport 1,1 pour 0,9 : titre et boutons à gauche, photo à droite. Les colonnes mesurent 699 et 572 px, séparées par une gouttière de 58 px (4 % de la largeur de l’écran), avec 56 px de marge. Sous 860 px de large, elles passent l’une sous l’autre.

La page d’une offre : six colonnes pour des cartes

Sur la page création de site vitrine, les réalisations (à retrouver dans le portfolio) reposent sur six colonnes de 199,7 px, avec 26 px de gouttière et 44 px entre deux rangées. Six colonnes permettent deux découpages : quatre colonnes à côté de deux, puis trois et trois. À 1 100 px de large et moins, la grille passe à deux colonnes, à 600 px et moins à une seule.

Cet article : une colonne de lecture

La page que vous lisez a une grille de trois pistes : la colonne de texte au centre, de 706 px ici, plafonnée à 68 ch, soit environ 85 caractères par ligne, au-dessus de la fourchette visée plus haut (une colonne de 60 ch la respecterait). De chaque côté, une zone large accueille les photos et les captures.

Erreurs fréquentes

• Changer de grille à chaque page. Des gouttières de 20 px ici et de 32 px là rendent le site brouillon.
• Un texte sur toute la largeur de l’écran. Plafonnez la colonne avec l’unité ch.
• Réordonner à l’écran ce que le HTML place autrement. Selon MDN, déplacer un bloc avec la grille ne change ni l’ordre de lecture des lecteurs d’écran ni celui de la touche Tab.
• Écrire le CSS deux fois, un jeu de règles par appareil : préférez une grille qui se range seule, les requêtes de conteneur et clamp().
• Oublier les dimensions des images. Sans width et height, la page se décale pendant le chargement ; web.dev juge bon un décalage cumulé (CLS) de 0,1 ou moins.
• Ajouter un effet avant d’avoir une grille solide. Un effet de défilement se pose en dernier. Sur une page de réservation, gardez la grille la plus simple possible (le site de réservation), et mesurez avant d’ajuster (les bonnes mesures).

Sources

Pages vérifiées en octobre 2026.

• MDN Web Docs : notions de base de CSS Grid, grille et autres méthodes de mise en page, sous-grille, grille et accessibilité, requêtes de conteneur et clamp() (en anglais, sauf la première).
• W3C, WCAG 2.2 : critère 1.4.8, présentation visuelle et critère 1.4.10, redistribution du contenu (en anglais).
• Matthew Butterick, Practical Typography, longueur de ligne (en anglais).
• Bootstrap 5.3, système de grille, et GOV.UK Design System, espacements (en anglais).
• Google Search Central, indexation mobile first, et web.dev, Cumulative Layout Shift (en anglais).

Questions fréquentes sur la grille de mise en page