Grille de mise en page

Une grille fixe a des colonnes définies en pixels, qui ne bougent pas avec la taille de l'écran. Une grille fluide utilise des unités relatives, ses colonnes s'adaptant à la largeur disponible. En responsive, on combine généralement une grille fluide et des points de rupture, la structure changeant à certains seuils, de 12 colonnes à 4 en mobile par exemple.

12 est le standard le plus répandu, parce qu'il se divise en 2, 3, 4 ou 6 et couvre la quasi-totalité des mises en page courantes. Pour une interface simple, page d'atterrissage ou article, 4 ou 6 colonnes suffisent. Pour une interface complexe avec beaucoup de variations, tableau de bord ou éditeur, 16 ou 24 colonnes donnent plus de finesse.

Pas forcément. La grille s'adapte au support et à ce qu'on veut y présenter. L'imprimé n'a pas de point de rupture ni de largeur variable, ce qui autorise des compositions que l'écran ne permet pas. Le principe reste le même, la déclinaison change.

Les outils de conception, Figma en tête, proposent des grilles configurables qu'on applique à un gabarit. Côté développement, les frameworks CSS comme Bootstrap ou Tailwind embarquent leurs propres grilles et leurs points de rupture, et CSS Grid permet d'en construire sur mesure. Les logiciels de PAO en proposent également, avec une logique proche.