Christophe Gindro | 2 Messages de forum
20 oct

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.

960.gs {PNG} 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) Exemple de grille en 16 colonnes {PNG}

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; }

 
 

Catégories

 
 
Retour accueil  | Nous contacter  | Suivre la vie du site Flux RSS  | SPIP