Crer une grille CSS responsive

Les systmes de grille CSS sont de plus en plus utiliss de nos jours. Ces systmes permettent de garder une cohrence dans le gabarit du site Internet tout en tant trs modulable.
Nous allons voir ici comment en dvelopper ce systme de grille et ladapter facilement aux tablettes et mobiles.

Les grilles CSS, quoi a sert ?

La plupart des sites Internet ont un gabarit gnrique . Par exemple, un blog va avoir un corps et une barre latrale. Une grille CSS va vous permettre de grer ce gabarit trs
facilement.
Lide cest de partager votre site en un nombre dfini de colonnes. Le gabarit de votre site sera dfini en fonction de ces colonnes.
Limage ci-contre affiche un exemple dun site (au hasard deercreation.fr) qui utilise un systme de grille 12 colonnes. On voit facilement que les lments sont aligns selon les
colonnes. Dun point de vue design, cet alignement est trs important. Il permet une meilleure harmonie et ergonomie sur le site.

Dans la partie ralisations, la largeur dune vignette vaut 4 colonnes. Puisquon met 3 vignettes par ligne notre total est donc bien gal 12 colonnes. Tout le principe est l. On ne
parle plus en pixels ou en pourcentage, on parle en colonne.

Ralisation
Ce systme de grille est finalement assez simple mettre en place et ne ncessite que du HTML et CSS. Il va falloir faire un peu de maths (enfin ce ne seront que des additions et
soustractions, rien de trop compliqu).
Ds le dbut, il est important de bien choisir la largeur de son site. Personnellement, je prends du 960px pour deux raisons : cest infrieur 1024px (gnralement cest la
rsolution minimale pour ordinateur) et surtout cest divisible la fois par 2 et par 3.
Pour mettre a en place, on va utiliser des classes CSS spcifiques et rutilisables. Le principe tant davoir un div qui reprsente une ligne et lintrieur les colonnes.

Ligne
Une ligne est une div qui contiendra les colonnes dont la somme font 12. Par exemple, une ligne contiendra deux colonnes de 7 et 5. Ou alors trois colonnes de 4.
.row {

width : 960px;
margin : 10px auto;

}
.row > div {
float : left;
margin : 0 10px;
}

Comme signal, chaque ligne fait 960 pixels de large. Le margin sert les centrer dans la page. On dfinit aussi ses enfants directs (donc les colonnes) comme flottant gauche
avec une margin de 10 pixels sur les cts pour les sparer.
Il est donc trs important que les lignes nait comme enfant direct uniquement les colonnes et que celles-ci soient des div.
NB : Dans les faits, les lignes auront un enfant supplmentaire qui devra sinsrer aprs toutes les colonnes. Nous allons y revenir

Colonnes
Notre systme est douze colonnes. Nous allons donc crer douze classes pour les reprsenter.
.w-1
.w-2
.w-3
.w-4
.w-5
.w-6
.w-7

{
{
{
{
{
{
{

width
width
width
width
width
width
width

:
:
:
:
:
:
:

60px; }
140px; }
220px; }
300px; }
380px; }
460px; }
540px; }

.w-8 { width : 620px; }

.w-9 { width : 700px; }
.w-10 { width : 780px; }
.w-11 { width : 860px; }
.w-12 { width : 940px; }

Rien de trop compliqu. On dfinit simplement des tailles nos colonnes.

Sparateur
Aprs toutes les colonnes dune ligne, un lment devra tre ajout pour signaler la fin dune ligne. Il sagit dun paragraphe vide ayant la class clear .
<p class="clear"></p>

Et le code CSS qui va avec :

.clear { clear : both ; }

Ce paragraphe permet de spcifier que son parent doit prendre en compte la hauteur de ses frres flottants. Il est donc indispensable au bon fonctionnement du systme de grille.

Utilisation
Code HTML
<div
class="row">
<div
class="w3">3</div>
<div
class="w9">9</div>
<p
class="clear">
</p>
</div>
<div
class="row">
<div
class="w4">4</div>
<div
class="w4">4</div>

Rsultat

<div
class="w4">4</div>
<p
class="clear">
</p>
</div>
<div
class="row">
<div
class="w6">6</div>
<div
class="w6">6</div>
<p
class="clear">
</p>
</div>

Voici quelques exemples de colonnes quil est possible de faire. On affiche ici des chiffres lintrieur, bien entendu dans les faits on affichera le contenu de notre site.

Grille responsive
Si on utilise correctement ce systme de gabarit sur toutes les pages du site, il sera alors trs simple de ladapter aux tablettes et mobile. Pour cela, nous allons utiliser les media
queries de CSS3. Si vous ne maitrisez pas bien ce concept, vous pouvez consulter le tutoriel pour crer un site web responsive.

Tablette
Pour adapter le gabarit aux tablettes, nous allons garder la mme structure sauf quelle va tre exprime en pourcentage plutt quen pixel. Ce faisant, le site prendra toute la
largeur de lcran et vitera un scroll horizontal peu adapt au format de lappareil.
@media only screen and (min-width:500px) and (max-width:980px) {
.row {
width : 100%;
}
.row > div {
margin : 0 0.5%;
}
.w-1 { width : 7.3%; }
.w-2 { width : 15.6%; }
.w-3 { width : 24%; }
.w-4 { width : 32.3%; }
.w-5 { width : 40.6%; }
.w-6 { width : 49%; }
.w-7 { width : 57.3%; }
.w-8 { width : 65.6%; }
.w-9 { width : 74%; }
.w-10 { width : 82.3%; }
.w-11 { width : 90.6%; }
.w-12 { width : 99%; }
}

En redimensionnant la largeur de votre navigateur, vous verrez que le site dadapte en largeur. On met une marge sur les ct de 0.5% (soit 1% en tout) pour viter que les colonnes
collent aux bords de la tablette.

Mobile
Pour le tlphone mobile, la problmatique est encore plus simple puisquon va dcider de tout mettre la ligne. Nos colonnes feront toutes 100% de large et reviendront la ligne.
Elle nont, par consquent, plus besoin de flotter gauche.
@media only screen and (max-width:500px) {
.row {
width : 100%;
}
.row > div {
margin : 0 1%;
}
.w-1, .w-2, .w-3, .w-4, .w-5, .w-6, .w-7, .w-8, .w-9, .w-10, .w-11, .w-12 {
width : 98%;
float : none;

On en profite aussi pour ajouter une marge sur les cts plus importante.