Bidouilleur

Les grilles CSS permettent de créer des structures de pages très rapidement, c’est ce système qui est employé dans les frameworks CSS comme blueprint ou encore 960gs.

Certaines personnes n’aiment pas ces frameworks à cause des  » kilo octets » en trop qu’ ils sont susceptibles d’amener. Voici un petit système de grille CSS compatible tous navigateurs qui devrait leurs faire changer d’avis:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

.grid_1 { width:60px; }
.grid_2 { width:140px; }
.grid_3 { width:220px; }
.grid_4 { width:300px; }
.grid_5 { width:380px; }
.grid_6 { width:460px; }
.grid_7 { width:540px; }
.grid_8 { width:620px; }
.grid_9 { width:700px; }
.grid_10 { width:780px; }
.grid_11 { width:860px; }
.grid_12 { width:940px; }
 
.column {
  float: left;
  margin: 0 10px;
  overflow: hidden;
  display: inline;
}
.row {
  width: 960px;
  margin: 0 auto;
  overflow: hidden;
}

Bien sur ce CSS n’est pas à lui seul un framework entier puisqu’il n’y a pas de reset CSS ou encore de style typographique..etc, mais il permet de créer la structure d’une page très simplement en évitant d’ écrire une tartine de CSS pour arriver à une structure compatible tous navigateurs.

Pour en savoir plus je vous invite à lire cet article.

Si vous êtes convaincu par ce système, voici un outil qui va vous permettre de générer votre système de grille CSS à votre convenance et toujours en moins d’ 1 Ko.

Twitter ce post