Un système de grille divise une page en colonnes et en lignes qui déterminent l'emplacement du contenu. Il structure la mise en page. Le graphiste suisse Josef Müller-Brockmann a formalisé les principes des grilles dans les années 1960, et son ouvrage « Grid Systems in Graphic Design » demeure une référence incontournable. Journaux, magazines et sites web utilisent tous des grilles, même si leur usage diffère.

Une grille classique comporte des colonnes, des gouttières et des marges. Les colonnes contiennent le contenu. Les gouttières séparent les colonnes. Les marges encadrent la page. Une grille à 12 colonnes est courante sur le web car elle se divise en deux, trois, quatre et six parties égales. Les concepteurs peuvent utiliser plusieurs colonnes pour un contenu plus large ou une seule colonne pour un texte plus court. La grille n'impose pas la mise en page. Elle fournit une structure que le concepteur peut suivre, adapter ou modifier à sa guise.

Composants de la grille

• Colonnes : bandes verticales pour le contenu.
• Gouttières : espaces entre les colonnes.
• Marges : bords extérieurs de la mise en page.
• Grille de base : lignes horizontales pour l’alignement du texte.

Briser la grille peut être saisissant. Une image pleine page qui ignore les colonnes attire l'attention précisément parce qu'elle transgresse la structure. Mais cette rupture n'est efficace que si la grille est suffisamment ancrée dans la réalité pour être perceptible.