Les systèmes de grille CSS sont de plus en plus utilisés de nos jours. Ces systèmes permettent de garder une cohérence dans le gabarit du site Internet tout en étant très modulable. Nous allons voir ici comment en développer ce système de grille et l’adapter facilement aux tablettes et mobiles.

Les grilles CSS, à quoi ça sert ?

La plupart des sites Internet ont un gabarit « générique ». Par exemple, un blog va avoir un corps et une barre latérale. Une grille CSS va vous permettre de gérer ce gabarit très facilement.

L’idée c’est de partager votre site en un nombre défini de colonnes. Le gabarit de votre site sera défini en fonction de ces colonnes.

L’image ci-contre affiche un exemple d’un site (au hasard deercreation.fr) qui utilise un système de grille à 12 colonnes. On voit facilement que les éléments sont alignés selon les colonnes. D’un point de vue design, cet alignement est très important. Il permet une meilleure harmonie et ergonomie sur le site.

Dans la partie réalisations, la largeur d’une vignette vaut 4 colonnes. Puisqu’on 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.

Créer une grille CSS responsive

Réalisation

Ce système de grille est finalement assez simple à mettre en place et ne nécessite 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é).

Dès le début, il est important de bien choisir la largeur de son site. Personnellement, je prends du 960px pour deux raisons : c’est inférieur à 1024px (généralement c’est la résolution minimale pour ordinateur) et surtout c’est divisible à la fois par 2 et par 3.

Pour mettre ça en place, on va utiliser des classes CSS spécifiques et réutilisables. Le principe étant d’avoir un div qui représente une ligne et à l’intérieur 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 définit aussi ses enfants directs (donc les colonnes) comme flottant à gauche avec une margin de 10 pixels sur les côtés pour les séparer.

Il est donc très important que les lignes n’ait comme enfant direct uniquement les colonnes et que celles-ci soient des div.

NB : Dans les faits, les lignes auront un enfant supplémentaire qui devra s’insérer après toutes les colonnes. Nous allons y revenir

Colonnes

Notre système est à douze colonnes. Nous allons donc créer douze classes pour les représenter.

.w-1 { width : 60px; }
.w-2 { width : 140px; }
.w-3 { width : 220px; }
.w-4 { width : 300px; }
.w-5 { width : 380px; }
.w-6 { width : 460px; }
.w-7 { width : 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 définit simplement des tailles à nos colonnes.

Utilisation

Ci-dessous, des exemples avec le code associé pour vous présenter le résultat :

2 colonnes de 3 et 9

2 colonnes de 3 et 9

<div class="row">
    <div class="w-3">3</div>
    <div class="w-9">9</div>
</div>

3 colonnes de 4

3 colonnes de 4

<div class="row">
    <div class="w-4">4</div>
    <div class="w-4">4</div>
    <div class="w-4">4</div>
</div>

2 colonnes de 6

2 colonnes de 6

<div class="row">
    <div class="w-6">6</div>
    <div class="w-6">6</div>
</div>

Voici quelques exemples de colonnes qu’il est possible de faire. On affiche ici des chiffres à l’intérieur, bien entendu dans les faits on affichera le contenu de notre site.

Exemple de colonnes avec grille CSS

Grille responsive

Si on utilise correctement ce système de gabarit sur toutes les pages du site, il sera alors très simple de l’adapter 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 bien utiliser les media queries.

Tablette

Pour adapter le gabarit aux tablettes, nous allons garder la même structure sauf qu’elle va être exprimée en pourcentage plutôt qu’en pixel. Ce faisant, le site prendra toute la largeur de l’écran et évitera un scroll horizontal peu adapté au format de l’appareil.

@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 d’adapte en largeur. On met une marge sur les côté de 0.5% (soit 1% en tout) pour éviter que les colonnes collent aux bords de la tablette.

Mobile

Pour le téléphone mobile, la problématique est encore plus simple puisqu’on va décider de tout mettre à la ligne. Nos colonnes feront toutes 100% de large et reviendront à la ligne. Elle n’ont, par conséquent, 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 côtés plus importante.