Dernière mise à jour : 21 juillet 2025
La grille permet à l'utilisateur d'avoir accès à des contenus organisés de manière harmonieuse, peu importe la taille de l'écran qu'il utilise.
Anatomie
La grille repose sur trois éléments : les marges, les colonnes et les gouttières.
Points de rupture (breakpoints)
La grille varie selon les points de rupture indiqués dans le tableau ci-dessous.
| Point de rupture | Intervalle (px) | Colonnes | Gouttière (px) | Marges (px) |
|---|---|---|---|---|
| Petite (mobile) | 320‑639 | 4 (fluide) | 16 px | 16 px |
| Medium (tablette) | 640‑1023 | 12 (fluide) | 24 px | 24 px |
| Large (ordinateur) | 1024‑1287 | 12 (fluide) | 24 px | 32 px |
| X‑large (ordinateur) | 1288+ | 12 (fluide) | 24 px | s. o. |
Design
Il faut d'abord commencer par développer les maquettes de pages Web pour le plus petit format d'écran (mobile). Ensuite, on les adapte au plus grand format, soit pour la grille x-large (desktop). Idéalement, on fournit les maquettes pour l'ensemble des grilles.
Dans la conception d'une page, la grille sert de base pourdisposer et structurer les différents éléments et composants.
Pour connaître les règles de base de conception relatives à la grille.