Framework CSS 960.gs

Les grilles sont utilisées en imprimerie pour structurer la mise en page. Elle permettent de définir des colonnes, séparées par des gouttières, pour positionner les contenus.

Ce principe a été adapté pour les pages web, et il existe de nombreux système de grille CSS.

Nous avons choisi 960.gs il y a quelques années car il nous semblait souple et simple d’usage.
Pourquoi 960 ? Cela correspond à la largeur de la page de 960 pixels définie par rapport à la résolution la plus courante de 1024x768.
Cette largeur de 960px, permet d’avoir une structure, au choix,

• en 12 colonnes de 60px avec 10px de marge pour chacune (soit une gouttière de 20px)
• en 16 colonnes de 40px avec 10px de marge pour chacune (soit une gouttière de 20px)
• en 24 colonnes de 30px avec 5px de marge pour chacune (soit une gouttière de 10px)

Les colonnes sont définies via des div et l’affectation de classes grid_1, grid_2, …, qui permettent de fixer leur largeur.
Elles utilisent la propriété float pour se positionner côte-à-côte, et sont séparées par la gouttière, qui dépend des marges qui peuvent être annulées par l’affectation de classes .alpha { margin-left: 0; } et .omega { margin-right: 0; }

• Le site 960.gs avec diverses ressources
• Un générateur de grille
• Le 1140 CSS grid qui convient pour une résolution en 1280px et s’adapte pour des résolutions inférieures.