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

Messages de forum (2)

  • Framework CSS 960.gs Le 6 mai 2016 à 14:06

    Pourquoi 960 ? Cela correspond à la largeur de la page de 960 pixels définie par rapport à la résolution la plus courante de 1024x768.

    wp webinar system

  • Serrurerie , par Serrurerie
    Le 17 juillet 2016 à 02:17

    On en veut davantage avec autant d\’humour. Continuez. Dorian de Serrurerie


Un message, un commentaire ?
  • (Pour créer des paragraphes, laissez simplement des lignes vides.)

Qui êtes-vous ? (optionnel)

 
 

Catégories

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