Grille de 8 px
Le système de grille permet d’assurer une cohérence entre les gabarits et les éléments visuels d’une interface. Tous les composants sont conçus en fonction du système de grille.
Mesure de base
L’ensemble du système de grille est construit à partir de multiples de 8 px. De cette façon, l’espacement, l’alignement et la dimension des gabarits et des éléments suivent une seule et même logique.
Les multiples de la grille sont : 8, 16, 24, 32, 40, 48, 56, 64, 72, 80 et ainsi de suite.
Il est également possible d’utiliser la moitié de la mesure de base (4 px) pour affiner des éléments comme les icônes ou la typographie.
Rythme vertical
Créé à partir d’une ligne de base de 8 px, le rythme vertical correspond à l’espacement entre le texte et d’autres objets de l’interface (champs de formulaire, éléments de navigation, etc.).
Dans un corps de texte, la mesure de l’espace entre deux lignes de base est appelée « interligne » (line-height en CSS).
À faire
À ne pas faire
Rythme horizontal
Le rythme horizontal est créé à partir de colonnes, de marges et de gouttières adaptables à la largeur de l’écran selon l’appareil utilisé. C’est à l'intérieur de cette grille que le contenu de la page est inséré.
Bien que la grille et les conteneurs puissent s’adapter à de grandes largeurs d’écrans, les contenus textuels doivent conserver une largeur de lecture maximale de 825 px. Cette contrainte s’applique aux lignes de texte et non à la largeur globale de la page ou du site, afin d’assurer une lisibilité optimale et conforme aux exigences d’accessibilité.
Colonnes
Le contenu principal de la page s’affiche dans les colonnes. Leur largeur est définie en pourcentage et le nombre de colonnes dans la grille est dépendant des points de rupture (tailles d’écran prédéterminées). Un écran plus petit affiche moins de colonnes qu’un écran plus grand.
Les éléments qui sont positionnés dans la grille peuvent occuper une ou plusieurs colonnes de large. Leur hauteur dépend du rythme vertical qui est fixe, mais leur largeur est dépendante de la dimension des colonnes. De plus, un élément peut occuper un nombre différent de colonnes selon la largeur de l’écran, par exemple, 6 colonnes dans le format bureau et 4 colonnes dans le format mobile.
Espaces intercolonnes
Les espaces intercolonnes, aussi appelées gouttières, aident à séparer le contenu. Ces espaces ont des largeurs fixes, mais changent selon le point de rupture.
La largeur d’un élément doit prendre fin à l’intérieur d’une colonne et non à la fin d’un espace intercolonne.
À faire
À ne pas faire
Marges
Les marges sont les espaces aux extrémités gauche et droite de l’écran. Elles évitent que le contenu soit collé à la limite de l’écran.
Les marges ont des largeurs fixes, mais changent selon le point de rupture. Les petits écrans ont des marges moindres que celles des écrans plus grands.
Points de rupture
Les points de rupture indiquent le nombre de colonnes, la largeur des espaces intercolonnes et la largeur des marges selon différentes tailles d’écran.
| Points de rupture | Taille d’écrans | Largeur maximale du conteneur | Nombre de colonnes | Largeur des gouttières | Largeur des marges |
|---|---|---|---|---|---|
| Entre 0 et 767 px | Petit | 728 px | 4 | 16 px | 16 px |
| Entre 768 et 991 px | Moyen | 768 px | 6 | 16 px | 16 px |
| Entre 992 et 1199 px | Grand | 992 px | 12 | 24 px | 24 px |
| 1200 px et plus | Très grand | 1200 px | 12 | 232 px | 32 px |
Disposition des éléments
La grille horizontale permet une grande flexibilité dans la disposition des blocs de contenu de la page. De façon générale, il n’est pas recommandé de placer 12 blocs de contenu dans une grille de 12 colonnes. Il est préférable de faire des subdivisions afin d’avoir assez d’espace pour insérer tous les contenus.
Par exemple, pour une grille de 12 colonnes dans le format bureau, la grille peut être découpée comme suit :
- 1 conteneur de 12 colonnes
- 2 conteneurs de 6 colonnes chacun
- 3 conteneurs de 4 colonnes chacun
- 4 conteneurs de 3 colonnes chacun
Ou en faisant des combinaisons :
- 1 conteneur de 8 colonnes et 1 conteneur de 4 colonnes
- 1 conteneur de 3 colonnes et 1 conteneur de 9 colonnes
Pour une grille de 6 colonnes dans le format tablette, la grille peut être découpée comme suit :
- 1 conteneur de 6 colonnes
- 2 conteneurs de 3 colonnes chacun
- 3 conteneurs de 2 colonnes chacun
Ou en faisant des combinaisons :
- 1 conteneur de 4 colonnes et 1 conteneur de 2 colonnes
- 1 conteneur de 2 colonnes et 1 conteneur de 4 colonnes
Pour une grille de 4 colonnes dans le format mobile, les éléments peuvent être répartis en 2 conteneurs, comme pour les icônes ou certains contenus courts.
Boîtes et espacements
Chaque élément de l'écran se trouve à l’intérieur d’une boîte : tout vit dans un rectangle. Les boîtes se composent de 4 éléments : l'élément lui-même, la marge intérieure, la bordure et la marge extérieure.
Élément
Chaque élément a une taille par défaut. Par exemple, la largeur d’une boîte de texte est influencée par le nombre de caractères et leur largeur, ainsi que par la dimension des colonnes dans lequel la boîte est positionnée. La hauteur de l’interligne (line-height) doit être un multiple de 8 px.
Marge intérieure (padding)
Il s’agit de l'espace intérieur entre la bordure et le contenu. L'augmentation de la marge intérieure augmente la taille de la boîte.
Bordure (border)
La bordure correspond à l’épaisseur du trait autour d’un élément. Dans certains logiciels de conception, les bordures peuvent être ajoutées à l’intérieur ou à l’extérieur d’une forme, ce qui diffère du comportement d’un navigateur Web.
En développement, la pratique recommandée est d’utiliser la propriété CSS box-sizing : border-box. Ce modèle de boîte inclut le contenu, la marge intérieure (padding) et la bordure dans la largeur et la hauteur totales d’un élément. Cela simplifie les calculs et assure une cohérence entre le design et le code.
Prenons l’exemple d’un bouton avec une bordure de 1 px et une marge intérieure de 8 px à gauche et à droite du texte. Grâce à border-box, l’espacement perçu respecte le rythme de la grille : le texte est toujours séparé de la bordure par 8 px, sans avoir à ajuster manuellement le calcul.
L’important est de conserver un rythme visuel cohérent, en privilégiant des espacements intérieurs et extérieurs qui suivent les multiples de 8 px. Cela garantit non seulement la régularité des interfaces, mais aussi une meilleure lisibilité et accessibilité pour toutes les personnes utilisatrices.
Marge extérieure (margin)
Il s’agit de l'espace entre les bordures d'un élément et les objets voisins. L'augmentation des marges extérieures augmentera l'espace autour de la boîte, repoussant les autres éléments autour.
Contribuer à améliorer le système de design
Pour nous assurer que cette page est utile et à jour, vous pouvez remplir le formulaire de demandes destinées à l’équipe Design de la Direction des communications numériques gouvernementales. Vous pouvez utiliser ce formulaire pour :
- nous transmettre des questions ou commentaires sur le système de design ;
- être ajouté à la liste d'envoi du système de design ;
- faire une demande de trousse, d'information pour un nouveau projet, etc. ;
- rapporter un bogue dans le site Web ou dans la trousse de développement.
Dernière mise à jour : 20 janvier 2026